PDA

View Full Version : Grid Reconfigure changing all instances of the grid



Thinker Bug
29 May 2014, 10:29 PM
Hi,

I m using Ext JS 4.2.1.
I have defined a grid with remote sorting, filtering and pagination and load it in multiple regions of viewport like
[{
region : 'center',
flex : 1,
border : true,
split : true,
xtype : 'incgrid'
},{
region : 'south',
flex : 1,
border : true,
split : true,
xtype : 'incgrid'
}]
The no:of grids to be loaded are decided dynamically , which goes to a maximum of 4.

Later I iterate through these grids and reconfigure each with different store and column.
It loads both the grids initially.
but when I load their stores for a second time (change the page, sort or filter), then the grid does not load data properly.
Looks like the dataIndex config for each column in that grid has changed.

And the grid which is loaded last works properly.(with all the filtering, pagination and sort)

Is it because the reconfiguration is happening to the same grid in each iteration and the column details are changing??
Please help in doing this in a better way possible.

scottmartin
2 Jun 2014, 12:46 PM
You have not provided enough information or code. Using reconfigure is like starting over with the grid.

Thinker Bug
5 Jun 2014, 2:22 AM
This is my grid. I reuse this grid to showcase different info.
I have and MVC app.

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();
}
})



This grid is loaded in more than one regions of viewport like,


[{
region : 'center',
flex : 1,
border : true,
split : true,
xtype : 'incgrid'
},{
region : 'south',
flex : 1,
border : true,
split : true,
xtype : 'incgrid'
}]


Now, I select the grids in the viewport,( I get different ids for each grid selected, so assuming each grid to be different) and reconfigure each with different store and column headers. this works.

Now if sorting , pagination or filters of one grid is changed (remote), the store parameters going in the request object are from the store of the last grid reconfigured, and not the current grid's store.

Is it because I m reconfiguring the same grid.How do I get it working?
Should I create as many grids as required?

Please help.

scottmartin
5 Jun 2014, 8:26 AM
the store of the last grid reconfigured, and not the current grid's store

Are you adding the store param to your reconfigure?

for your store, you can use the following to get a new instance



store: {
type: 'store-alias' // alias assigned in store define
}

Thinker Bug
8 Jun 2014, 8:51 PM
This is my reconfigure code.
The store object is created ,
then the model for the grid is set and the grid store is loaded.

gridStore = me.gridStoreFactory(loadingGrid);
//setting the grid model before loading the grid Ext.Ajax.request({
url:Inc.globals.Urls.GRID_MODEL_SERVICE,
method:'GET',
params : {
gridId : loadingGrid.initialConfig.gridId
},
success: function (response) { //TODO response error case handling
var gridModel = me.getModel('details.Grid');//getting the grid model object from the store
gridModel.setFields(Ext.JSON.decode(response.responseText));//setting the fields in model object

//loading the grid store
gridStore.load({
params : {
headerStatus : true,
filter : [],
sort : []
},
callback: function(records, operation, success) {//TODO response error case handling
if(success){
Ext.suspendLayouts();
var gridData = Ext.JSON.decode(operation.response.responseText);
loadingGrid.reconfigure(gridStore,gridData.headers);
loadingGrid.down('pagingtoolbar').bindStore(gridStore);
loadingGrid.down('pagingtoolbar').doRefresh();
Ext.resumeLayouts(true);
}

}
});
}
});


gridStoreFactory : function(loadingGrid){
return Ext.create('Ext.data.Store',{
model : 'Inc.model.details.Grid',
pageSize: Math.floor(loadingGrid.body.getHeight(true) / 21.5),
remoteSort : true,
remoteFilter : true,
autoLoad : false,
scope : this,
proxy : {
type: 'jsonajax',//custom proxy
url : Inc.globals.Urls.GRID_SERVICE,
actionMethods :{
read : 'POST'
},
reader : {
type : 'json',
encode : true,
root : 'rows',
totalProperty: 'total'
}
}
});
},