PDA

View Full Version : Do I need a store here?



danvega
24 Jul 2010, 5:38 PM
When you are dealing with 1 record do you still use a store? In this example the loadSession() method gets passed the id of the record it needs to show. Everything works fine but in my callback I am not sure how to update my template.

How do I update the store?
Do I need a store?
Should I just have a template and update the template?



SessionDetails = Ext.extend(Ext.Panel,{
fullscreen:true,

initComponent: function(){

this.titlebar = new Ext.Toolbar({
title:'Session Details',
dock:'top',
items:[
{xtype:'button',text:'Back',handler:this.onBack}
]
});

Ext.regModel("Session",{
fields:[
{name:'id',type:'int'},
{name:'schedule',type:'object'},
{name:'description',type:'string'},
{name:'name',type:'string'},
{name:'speakers',type:'object'}
]
});

this.tpl = [
'<tpl for=".">',
'<div class="session-detail">',
'<span class="strong">{name}</span><br/>',
'{description}',
'</div>',
'</tpl>',
];

this.dv = new Ext.DataPanel({
id:'sDataView',
fullscreen:true,
tpl:this.tpl,
store: new Ext.data.Store({
model: 'Session'
})
});

this.dockedItems = [this.titlebar];
this.items = [this.dv];

SessionDetails.superclass.initComponent.apply(this,arguments);


},

onBack: function(){
Ext.getCmp('topicsPanel').setCard(1);
},


loadSession: function(id){
var url = 'AjaxProxy.cfc';

Ext.getBody().mask(false, '<div class="loading">Loading&hellip;</div>');

Ext.util.JSONP.request({
url: url,
callbackKey: 'callback',
params:{
method:'get',
_cf_nodebug:true,
targeturl: 'http://abc.com/462.json'
},
callback: function(result) {
// The result contains id,name,description,schedule,speakers
console.log(result);
Ext.getBody().unmask();
}
})

}

});

danvega
25 Jul 2010, 10:06 AM
The store has a method for adding a record store.add(Object).

I used that and it works but the application errors out after it.

"Uncaught TypeError: Cannot call method 'split' of undefined - ext-touch-debug.js Line 4671"



SessionDetails = Ext.extend(Ext.Panel,{
fullscreen:true,

initComponent: function(){

this.titlebar = new Ext.Toolbar({
title:'Session Details',
dock:'top',
items:[
{xtype:'button',text:'Back',handler:this.onBack}
]
});

Ext.regModel("Session",{
fields:[
{name:'id',type:'int'},
{name:'schedule',type:'object'},
{name:'description',type:'string'},
{name:'name',type:'string'},
{name:'speakers',type:'object'}
]
});

this.tpl = [
'<tpl for=".">',
'<div class="session-detail">',
'<span class="strong">{name}</span><br/>',
'{description}',
'</div>',
'</tpl>',
];

this.dv = new Ext.DataPanel({
id:'sDataView',
fullscreen:true,
tpl:this.tpl,
store: new Ext.data.Store({
model: 'Session'
})
});

this.dockedItems = [this.titlebar];
this.items = [this.dv];

SessionDetails.superclass.initComponent.apply(this,arguments);


},

onBack: function(){
Ext.getCmp('topicsPanel').setCard(1);
},


loadSession: function(id){
var url = 'AjaxProxy.cfc';

Ext.getBody().mask(false, '<div class="loading">Loading&hellip;</div>');

Ext.util.JSONP.request({
url: url,
callbackKey: 'callback',
params:{
method:'get',
_cf_nodebug:true,
targeturl: 'http://abc.com/462.json'
},
callback: function(result) {
Ext.getCmp('sDataView').getStore().add(result);
Ext.getBody().unmask();
}
})

}

});


What am I doing wrong here?
What should I be doing?

evant
25 Jul 2010, 5:22 PM
Something to do with DomQuery, but there's not really enough info. Follow the stack trace to see what's calling it.

quest4knowledge
27 Jul 2010, 6:15 PM
I ran into the same javascript error when creating an Ext.List (which extends from Ext.DataView, which extends from Ext.DataPanel). I managed to prevent the error by adding an itemSelector to the List's config object.

So I went from this:

{xtype: 'list', store: ListApp.Main.Store, tpl: ListApp.Main.listTpl}

to this:

{xtype: 'list', store: ListApp.Main.Store, tpl: ListApp.Main.listTpl, itemSelector: 'div.row'}

so you might want to try doing that to your DataPanel.