PDA

View Full Version : pagingbar refresh does not load new data



hazimdikenli
1 Nov 2010, 4:33 AM
This is a common grid/store scenario.
The only difference is I serialize the first page of data on the store and I try to load the next pages on demand. So it is a json data store in fact, but with some initial data on it. In the case below there is only 6 rows where page size is 20, anyhow I do a refresh on the paging tool bar, it posts the request, and I see the json data being sent over the wire. But after that my grid is all empty. What do u think might be the problem? (Total and Data Properties are also correct in the json).
Returned json is like


{"rowCount":6,"data":[{"Parametre....

store and grid code



Ext.onReady(function () {
var data = new Ext.data.Store({ storeId: 'parametre_store'
,autoDestroy: true
,autoLoad: true
,autoSave: false
,restful: false
,idProperty: 'ParametreId'
,reader: new Ext.data.JsonReader({
totalProperty: 'rowCount'
,rootProperty: 'data'
,successProperty: 'success'
,idProperty: 'ParametreId'
,fields: [{name: 'ParametreId', type: Ext.data.Types.STRING},
{name: 'Kod', type: Ext.data.Types.STRING},
{name: 'Ad', type: Ext.data.Types.STRING},
{name: 'Aktif', type: Ext.data.Types.BOOL}]
})
,writer: new Ext.data.JsonWriter({
encode: true
,encodeDelete: false
,listful: false
,writeAllFields: false
})
,proxy: new Ext.data.HttpProxy({
url: '/Siber.Riva.Web/GD/Tanimlar/ListeGetir/Birim'
,method: 'POST'
})
,data:[{"ParametreId":"52fcfdc7-ed1e-4190-b41a-f49db88837a8","Kod":"AD","Ad":"ADET","Aktif":true},{"ParametreId":"d86c93b2-8dba-47ee-8a7c-fad6979a6660","Kod":"FICI","Ad":"FII","Aktif":true},{"ParametreId":"f8701e75-f30a-4e0c-868e-77907962590c","Kod":"KAP","Ad":"KAP","Aktif":true},{"ParametreId":"90132146-1d63-4e2e-bd02-a5d456056e41","Kod":"KG","Ad":"KiloGram","Aktif":true},{"ParametreId":"0e665834-ae08-4ad5-ad94-63ba7fd8385f","Kod":"LT","Ad":"Latte","Aktif":true},{"ParametreId":"7c9458e9-57a7-4e8b-9443-35c542d60cd1","Kod":"PLT","Ad":"PALET","Aktif":true}]

});
data.totalLength = 6;

Ext.QuickTips.init();

var cm = new Ext.grid.ColumnModel({

defaults: {
sortable: true // columns are not sortable by default

}
, columns: [
{ id: 'Kod', dataIndex: 'Kod', header: 'Kod', width: 100, editor: new Ext.form.TextField({ allowBlank: false }) },
{ dataIndex: 'Ad', header: 'Ad', width: 100, sortable: true, editor: new Ext.form.TextField({ allowBlank: false }) },
{ xtype: 'checkcolumn', header: 'Aktif?', dataIndex: 'Aktif', width: 55 }
]
});


var grid = new Ext.grid.EditorGridPanel({ id: 'grdListe'
, applyTo: 'grdListe_div'
//, selModel: new Ext.grid.RowSelectionModel({})
, iconCls: 'silk-grid'
, viewConfig: { autoFill: true }
, forceFit: true
, border: true
, clicksToEdit: 1
, autoHeight: true
//, autoWidth: true
, store: data
, cm: cm
, bbar: new Ext.PagingToolbar({ pageSize: 20, store: data, displayInfo: true })

});


hook_all_stores(); // store's beforesave handler
Ext.Siber.onSubmit(function () {
serialize_all_stores(); //serialize store changes in the hidden
});

});

Condor
1 Nov 2010, 4:45 AM
Attach an exception event handler to the store to see if it loads correctly.

hazimdikenli
1 Nov 2010, 5:02 AM
One thing I found out in the store configuration is;


,reader: new Ext.data.JsonReader({
totalProperty: 'rowCount'
,rootProperty: 'data'
,successProperty: 'success'
,idProperty: 'ParametreId'
,fields: [{name: 'ParametreId', type: Ext.data.Types.STRING},
{name: 'Kod', type: Ext.data.Types.STRING},
{name: 'Ad', type: Ext.data.Types.STRING},
{name: 'Aktif', type: Ext.data.Types.BOOL}]
})

when I correct that as "root" then it does not work unless I remove the initial data from the store. So is it possible to load some data initially and use the JsonReader to load more on demand.
When I have the root property correct and set some initial data , the error I get in Chrome is;
Uncaught TypeError: Cannot read property 'length' of undefined
Ext.extend.readRecordsext-all.js:7
Ext.data.Store.Ext.extend.loadDataext-all.js:7
Ext.data.Store.Ext.extend.constructorext-all.js:7
(anonymous function)

Condor
1 Nov 2010, 5:11 AM
Your initial and loaded data need to have the same layout, so I would recommend changing your initial data, e.g.


root: 'data',
data: {data: [{"Parametre...]}

hazimdikenli
1 Nov 2010, 5:50 AM
Actually this was what I was hoping, but it was not working because apparently I was not configuring the reader properly. The reader actually works now and everything looks much better , because I dont have to set the store's total length manually like data.totalLength = 6;


Store's data property is like ;

,data:{"rowCount":6, "data":[{"ParametreId":"52fcfdc7-ed1e-4190-b41a-f49db88837a8","Kod":"AD","Ad":"ADET","Aktif":true},{"ParametreId":"d86c93b2-8dba-47ee-8a7c-fad6979a6660","Kod":"FICI","Ad":"FII","Aktif":true},{"ParametreId":"f8701e75-f30a-4e0c-868e-77907962590c","Kod":"KAP","Ad":"KAP","Aktif":true},{"ParametreId":"90132146-1d63-4e2e-bd02-a5d456056e41","Kod":"KG","Ad":"KiloGramm?","Aktif":true},{"ParametreId":"0e665834-ae08-4ad5-ad94-63ba7fd8385f","Kod":"LT","Ad":"Lattete","Aktif":true},{"ParametreId":"7c9458e9-57a7-4e8b-9443-35c542d60cd1","Kod":"PLT","Ad":"PALET","Aktif":true}]}

and you can remove the following line;

data.totalLength = 6;