PDA

View Full Version : Grid instances



Thinker Bug
11 Jun 2014, 8:39 PM
Hi ,

I m using Ext JS v4.2.1 . I have and MVC App.
I have defined a grid :
Ext.define('Inc.view.details.Grid' ,{
extend: 'Ext.grid.Panel',
requires : ['Ext.ux.grid.FiltersFeature','Ext.data.Store','Ext.ux.ProgressBarPager'],
alias: 'widget.incgrid',
store : Ext.create('Ext.data.Store', {
fields: [],
data : []
}),
stripeRows: true,
forceFit : true,
remoteSort : true,
dockedItems : [{
xtype: 'pagingtoolbar',
store : Ext.create('Ext.data.Store', {
fields: [],
data : []
}),
dock: 'bottom',
displayInfo: true,
plugins: Ext.create('Ext.ux.ProgressBarPager', {})
}],
features: [{
ftype: 'filters',
encode : true,
local: false
}],
initComponent: function(){
Ext.apply(this, {
tbar : [{
text: Inc.utils.Utils.loadMessage().add,
action : 'addrecord',
iconCls : 'inc-grid-add'
}],
columns : [],
viewConfig: {
emptyText: Inc.utils.Utils.loadMessage().emptyRecords
}
});
this.callParent();
}
});


and I load this in multiple regions of viewport and bind with different stores:
[{ "region" : "center",
"flex" : 1,
"xtype" : "incgrid"
},{
"region" : "east",
"flex" : 1
"xtype" : "incgrid"
}]

But when I reconfigure one of the grids , all of them seems to get reconfigured.

Should I define as many grids as required??

mitchellsimoens
26 Jun 2014, 6:28 AM
The first issues I see is you are creating instances of the store (on the grid and paging toolbar) and plugin and setting them as a property which will place it on the prototype which will get shared for each Inc.view.details.Grid instance. You need to use config objects instead.

Also, the grid and paging toolbar need to share the same store instance or else when you use the paging toolbar, the grid won't reflect the change.