PDA

View Full Version : Grid is not being filled with returned records



KallDrexx
18 Dec 2010, 6:38 AM
I am trying to create a grid, and so far I have the following code:



MyApp.grids.RelationshipMemberGrid = Ext.extend(Ext.grid.GridPanel, {
autoHeight: true,
iconCls: 'icon-grid',
title: 'Relationship Members',
frame: true,
viewConfig: { forceFit: true },
relationshipId: null,
documentId: null,

initComponent: function () {
if (this.verifyParameters()) {
// Initiate functionality
this.columns = this.buildColumns();
this.view = this.buildView();
this.store = this.buildStore();
this.store.load();
}

MyApp.grids.RelationshipMemberGrid.superclass.initComponent.call(this);
},

verifyParameters: function () {
// Verification code
},

buildColumns: function () {
return [{
header: 'Id',
dataIndex: 'Id',
sortable: true,
width: 10
}, {
header: 'Type',
dataIndex: 'ObjType',
sortable: true,
width: 10
}, {
header: 'Name',
dataIndex: 'Name',
sortable: true
}];
},

buildView: function () {
return new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Members" : "Member"]})'
});
},

buildStore: function () {
return new Ext.data.GroupingStore({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
reader: new Ext.data.JsonReader({
root: 'data'
}),
groupField: 'ObjType'
});
}
});


MyAppUrls.ListRelationshipMembers is a valid constant with the correct URL string in it. When I load this component, the ListRelationshipMembers URL returns the following json:



{"data":[{"Id":1,"ObjType":"topic","Name":"Test2"}]}


Unfortunately, the grid is showing with the border, columns, etc.. but no data is being populated in the grid itself. As this is my first attempt at using grids, I am not sure what I am doing wrong.

Aero
18 Dec 2010, 5:28 PM
Hi,

Haven't tested you code but mabey you need a totalProperty and successProperty: 'success' config in the reader. Echo JSON from php for instance with a totalCount in the JSON callback.Also i have the fields within the reader.

Something like (in php):



echo $callback . '(' . json_encode(Array('totalCount' => $nbrows,
'records' => $result
)
) . ');';


this is how my reader looks like for a GroupStore.



var taskReader = new Ext.data.JsonReader({
idProperty: 'id',
root: 'records',
successProperty: 'success',
totalProperty: 'totalCount',
fields: [
{name: 'kategori'},
{name: 'artikel'},
{name: 'fee', type: 'float'},
{name: 'units'},
{name: 'sum'},
{name: 'indoor', type: 'bool'}
]

});




Ps. Use the in-build CRUD function..it will make your life much easier =)

KallDrexx
18 Dec 2010, 8:08 PM
Thanks for the response! I tried updating my server, which now returns the following JSON:


{"success":true,"data":[{"Id":1,"ObjType":"topic","Name":"Test2"}],"totalCount":1}

and I updated my data store to be:


new Ext.data.GroupingStore({
autoLoad: false,
url: ScrawlUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
reader: new Ext.data.JsonReader({
root: 'data',
idProperty: 'Id',
totalProperty: 'totalCount'
}),
groupField: 'ObjType'
});

And I still don't have any records being displayed :(.


Ps. Use the in-build CRUD function..it will make your life much easier =)


I'm all for making my life easy, have any good resources for the CRUD functionality?

Animal
19 Dec 2010, 12:50 AM
Are you ever loading the Store?

Aero
19 Dec 2010, 4:53 AM
Hi Kall,

Sorry to hear, well,my JSON returns:


stcCallback1002({"totalCount":178,"records":[{"kategori":"Cover wrap","artikel":"1000*0.025*1000.......


As for organize your code to be CRUD i would do



var remoteProxy = new Ext.data.ScriptTagProxy({ // if on other domain,otherwise HTTPproxy will do.

api : {
read : 'read-url',
create : 'insert-url',
update : 'update-url,
destroy : 'delete-url'
},

method:'post'
});



var taskReader = new Ext.data.JsonReader({
idProperty: 'id',
root: 'records',
successProperty: 'success',
totalProperty: 'totalCount',
fields: [
{name: 'kategori'},
{name: 'artikel'},
{name: 'fee', type: 'float'},
{name: 'units'},
{name: 'sum'},
{name: 'indoor', type: 'bool'}
]

});




var writer = new Ext.data.JsonWriter({ // 2
writeAllFields : true
});



var store = new Ext.data.GroupingStore({
reader: taskReader,
proxy : remoteProxy,
root:'records',

baseParams :'heej',
autoLoad : false,
autoSave:false,
writer : writer,
remoteSort:true,
sortInfo:{field: 'kategori'},
groupField:'kategori',
success: function(){Ext.Msg.alert('Status', 'Login Successful!');},
failure : function(){Ext.Msg.alert('Status', 'Error!');}



});

KallDrexx
19 Dec 2010, 7:43 AM
Are you ever loading the Store?

Yes. I created a loadData function in this component that calls this.store.load(). This is being called when a button is pressed, as well as in the parent's initComponent (after the superclass.initComponent call). Also, setting autoLoad: true does not make records appear either.

I have verified that my loadData() is being calld, as well as the fact that every time I expect this.store.load() to be called the store is correctly making calls to my webserver, and the posted JSON is being returned every time.

mankz
19 Dec 2010, 7:43 AM
Your fields property is on the wrong level, it is a config property of your reader. Currently you have it on your Store level (wrong).

KallDrexx
19 Dec 2010, 10:13 AM
Your fields property is on the wrong level, it is a config property of your reader. Currently you have it on your Store level (wrong).

Aha, that was it! Thank you very much!

KallDrexx
19 Dec 2010, 9:30 PM
Are there any good resources on data stores, because this is starting to get ridiculous. I added a ListView to my application and now am having the hardest time getting data to populate in it, even using everything from this thread and elsewhere. Just by following the examples on the API page (http://dev.sencha.com/deploy/dev/docs/?class=Ext.data.JsonStore), I have the following code:



return new Ext.data.JsonStore({
url: MyAppUrls.ListObjectRelationships,
baseParams: { id: this.objId },
root: 'rels',
fields: ['Id', 'Name']
});

When this data store is loaded, the following JSON is returned from the webserver:


{"success":true,"rels":[{"Id":1,"Name":"My Relationship"}],"results":1}


I don't understand why the data is being returned, but the store will not populate the data. What makes this more frustrating is nothing happens, there are no console errors or warnings or anything, I get absolutely nothing that will help me debug the issue.

I have tried changing the store so that it exactly mimics the code used by my grid (using a JsonStore instead of a GroupingStore) and nothing happened. I tried adding a reader with the total and id properties, and nothing happens. I follow all the examples I can find in ExtJs In Action, in the API docs, and around the web and nothing happens.

Like the previous times, I can see the webserver call being made and the only way that url will be called is via this data store.

If anyone can point me to something that shows why I seem to be having so much trouble with data stores, I would be immensely grateful

evant
19 Dec 2010, 9:38 PM
There are 2 points:

1) Does the store ever get loaded with data? Common things: Do you call load, are the mappings correct.
2) Are the bindings on the component correct? Simply loading the store doesn't meaning anything if it's not correctly bound to the component. Again, check names, mappings etc.

KallDrexx
19 Dec 2010, 9:43 PM
There are 2 points:

1) Does the store ever get loaded with data? Common things: Do you call load, are the mappings correct.
2) Are the bindings on the component correct? Simply loading the store doesn't meaning anything if it's not correctly bound to the component. Again, check names, mappings etc.

1) Yes, the store gets loaded. Setting a breakpoint shows that I am calling relList.store.load(), and chrome is showing the request being made, plus the XHR json coming back from the webserver due to that web call.
2) As far as I can tell the bindings are correct. The listview is being built with:



this.relList = new Ext.list.ListView({
singleSelect: true,
store: this.buildStore(),
emptyText: 'No relationships for this object',
//style: 'background-color: #FFFFFF;',
columns: [{
header: 'Id',
dataIndex: 'Id'
}, {
header: 'Name',
dataIndex: 'Name',
}]
});


Both before and after this code, the listview is showing in my panel with both columns, but no data.

mankz
19 Dec 2010, 10:54 PM
2 things, you have an extra comma after 'dataIndex : "Name",' not sure if that matters but remove it anyway.

Listen for a store exception:



store.on('exception', function() {alert('oooops');});

KallDrexx
20 Dec 2010, 1:38 PM
I finally figured out (somewhat) what was going on. I was using the ListPanelBaseCls as defined in ExtJS In Action, and for some reason the base class' methods were preventing this from happening correctly. Not exactly sure why the superclass was preventing it from loading the data (since the URL was being called, so my extended store code should be running) but it seems to be loading all the data now.

Thanks everyone for being patient and helping!