PDA

View Full Version : Grid data does not display



marc123
23 Sep 2013, 2:44 PM
Hello,

I have a viewport, containing a grid. The grid refers a store that refers a model. It's an ajax store, the url points to a local webserver that delivers json. I can see it delivers json in the firebug console but the data does not display.
I checked:

the proxy.reader.root property refers the key in the returned json that holds an array of objects;
the model and the grid refer to the same fields in the same order as they are returned by the server;
when I change the proxy.type from 'json' to 'memory' and add a data key to the proxy that holds the exact same json data being returned by the local server, it displays ok.

Here is code:

returned json:


{"data"[
{"phone":"555-111-1224","name":"Lisa","email":"lisa@simpsons.com"},{"phone":"555-222-1234","name":"Bart","email":"bart@simpsons.com"},{"phone":"555-222-1244","name":"Homer","email":"home@simpsons.com"},{"phone":"555-222-1254","name":"Marge","email":"marge@simpsons.com"}
]}


/app/model/client/Client.js


Ext.define('iCollect.model.client.Client',{
extend:'Ext.data.Model',
fields:[
{name:'phone', type:'auto' },
{name:'name', type:'auto' },
{name:'email', type:'auto' }
]
});


/app/store/client/Client.js


Ext.define('iCollect.store.client.Client',{
extend: 'Ext.data.Store',
model: 'iCollect.model.client.Client',
proxy: {
type : 'ajax',
url : '/RemoteProxy.cfm?method=getClientData&reload=true',
reader : {
type : 'json',
root : 'data'
},
writer : {
type : 'json',
allowSingle : false
},
api : {
create : '/RemoteProxy.cfm?method=addClientData&reload=true',
read : '/RemoteProxy.cfm?method=getClientData&reload=true',
update : '/RemoteProxy.cfm?method=updateClientData&reload=true',
destroy : '/RemoteProxy.cfm?method=deleteClientData&reload=true'
}
}
});
Ext.create('iCollect.store.client.Client').load();


/app/view/clients/Grid.js:


Ext.define('iCollect.view.clients.Grid',{
extend : 'Ext.grid.Panel',
width : 800,
initComponent : function() {
var me = this;
me.store=me.buildStore();
//me.columns = me.buildColumns();
this.callParent(arguments);
},
buildStore : function(){ //defining the client`s store
return Ext.create('iCollect.store.client.Client');
},
//buildColumns : function(){
// return [
columns : [
{text:'Phone', dataIndex:'phone' },
{text:'Name', dataIndex:'name' },
{text:'Email', dataIndex:'email' }
]
});


/app/view/Viewport.js


Ext.define('iCollect.view.Viewport',{
extend : 'Ext.container.Viewport',
layout : 'fit',
items : [{
xtype : 'panel',
items : [
Ext.create('iCollect.view.clients.Grid',{
title:'Test Grid'
})
],
dockedItems : [{
xtype : 'toolbar',
docked : 'top',
items : [{
text : 'Start',
menu : [
{text:'Clients',icon:'/resources/icons/users.png'},
{text:'Invoices',icon:'/resources/icons/document_horizontal_text.png'},
{text:'Categories',icon:'/resources/icons/drawer.png'}
]
},
'->',
{
text : 'Jan Doedel',
icon : '/resources/icons/user.png'
}]
}]
}]
});


/app.js


Ext.onReady(function(){
Ext.create('iCollect.view.Viewport',{
});
});


The toolbar with the 'Save' menu shows, the grid's columnheaders show but the data does not show. There are no errors in the firebug Console...
Can anyone see what's wrong here???

Thanks,

Marc

evant
23 Sep 2013, 2:59 PM
Your json is invalid, there's no ":" after data.

marc123
23 Sep 2013, 11:54 PM
That json is indeed invalid. Probably because I edited it before posting. But also this json does not display:


{"data":[

{"phone":"555-111-1224","name":"Lisa","email":"lisa@simpsons.com"},
{"phone":"555-222-1234","name":"Bart","email":"bart@simpsons.com"},
{"phone":"555-222-1244","name":"Homer","email":"home@simpsons.com"},
{"phone":"555-222-1254","name":"Marge","email":"marge@simpsons.com"}]
}


Marc

marc123
24 Sep 2013, 1:34 AM
Ok, I tried again:

Copy the Json returned by the webserver (via Firebug console tab);
added a 'data' key to the store, it's value = this json (I pasted it as is);
changed property store.proxy.type from 'json' to 'memory'

Refreshing the page and voila: the data gets displayed...
I don't understand why this data is not displayed when retrieved from server...

marc123
24 Sep 2013, 1:56 AM
Ok, I got the data to display by adding

autoLoad:true,
to the store.
Initially I had

Ext.create('iCollect.store.client.Client').load();
after the store class definition, and that also loaded the data. The Response header also contained mime-type=application/json and the same content-length of 282.
Now adding autoload has the side effect of displaying it as well...
Is autoload needed to display remote data???

Thanks,

Marc

Farish
24 Sep 2013, 2:42 AM
setting autoLoad to true isnt required. Was the data loading at all when you didnt have this set to true?

marc123
24 Sep 2013, 2:45 AM
"Initially I had
Code:


Ext.create('iCollect.store.client.Client').load();
after the store class definition, and that also loaded the data"

Farish
24 Sep 2013, 2:51 AM
you are calling create().load() whereas in the grid's store config, you are using buildStore which is also creating the store. wouldnt that create two stores? if this is the case, then may be the store being created by create().load() is being loaded and not the one attached to the grid.

marc123
24 Sep 2013, 3:10 AM
Hi Farish,
thanks for your help! I followed up on your suggestion...
so I commented out the line

Ext.create('iCollect.store.client.Client'); after the store definition, so then I have 1 store instance in use, attached to the grid. Only if I enable the autoLoad=true option on the store , data is displayed. Else no data gets displayed...

btw, if I have 2 stores in use: 1 on the grid and 1 by explicitly loading it with Create().load()), there would be 2 remote requests to the server, right? I just see 1..

Marc

Farish
24 Sep 2013, 3:16 AM
only if autoLoad is set to true for the store attached to the grid. otherwise, that store isnt loading and thats why you dont see any data in your grid.

you can call grid.getStore().load() if you want to load that store.