PDA

View Full Version : Rendering data on gridpanel is very slow/ Extjs 4.2.1



Marcial Coca
1 Apr 2014, 2:14 PM
I just updated my aplication from ext js 4.1 (Build Date 2012-07-04- 21:23:42) to extjs 4.2.1.883, but my gridpanels are rendering very slow, it took almost 30 seconds in rendering for each request. This is my code of my store:

Ext.define('App.store.Item', {
extend: 'Ext.data.Store',
requires: [
'App.model.Item'],
constructor: function(cfg) {

var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'App.model.Item',
remoteFilter: true,
remoteSort: true,
pageSize: 50,

proxy: {
type: 'ajax',
url: '/Item/GetItems',
reader: {
type: 'json',
messageProperty: 'success',
root: 'result',
totalProperty: 'totalCount'
}

},
listeners: {

'load': function(store, records, options) {
if (records) records.forEach(function(record) {
record.set('CreatedDate', Utils.parseJsonDateToDate(record.data.CreatedDate));
record.set('ModifiedDate', Utils.parseJsonDateToDate(record.data.ModifiedDate));
record.set('StartDate', Utils.parseJsonDateToDate(record.data.StartDate));
record.commit();

});
}
}
}, cfg)]);
}
});

With the previous extjs(4.1) it works normally. Now I realizes it is because I am doing some operation on load event to fix the format of date fields. But now I want it to work with the last version of extjs, How can I fix it? Any helps please.

scottmartin
3 Apr 2014, 1:35 PM
What are the details of your grid view. There should be no reason for it to take this long. Is this in Chrome as well as IE?

Marcial Coca
3 Apr 2014, 2:10 PM
yes, it is on Chrome and IE, by now I fixed removing the fixes from load event of the store and calling the renderer function on gridcolumn for each datefield. something like this:

Ext.define('App.view.List', {
extend: 'Ext.panel.Panel',
items: [{
xtype: 'gridpanel',

dockedItems: [{
xtype: 'pagingtoolbar',
dock: 'bottom',
}],
columns: [{
xtype: 'datecolumn',
dataIndex: 'CreateDate',
text: 'Created',
renderer: function(value) {
return Ext.Date.format(Utils.parseJsonDateToDate(value), 'm/d/Y');
}
}, {
xtype: 'datecolumn',
dataIndex: 'ModifiedDate',
text: 'Modified',
renderer: function(value) {
return Ext.Date.format(Utils.parseJsonDateToDate(value), 'm/d/Y');
}
}, {
xtype: 'datecolumn',
dataIndex: 'StartDate',
text: 'Start',
align: 'center',
renderer: function(value) {
return Ext.Date.format(Utils.parseJsonDateToDate(value), 'm/d/Y');
}
}]
}]


});

now if I have many columns like this, I have to implement the same function for all of them.
I don't know it there is a better way to do it.

scottmartin
3 Apr 2014, 2:54 PM
Only to create a single function and have the renderer call that:

renderer: myDateRenderer