PDA

View Full Version : Ext JS 4.2.1 Grids are not restoring columns state(width,position,hidden)



prem.nagtilak
21 Nov 2013, 10:27 PM
I was using Ext Js 4.0 for my grids and charts. I have used cookie provider to store state of grids.
Ext.Grid.Panel was maintaining and restoring state of columns i.e. width, position, sort and hidden state also.
Now since i am using Ext Js 4.2.1 Ext.Grid.Panel and Ext.Tree.Panel are not restoring columns state.
Ext.Grid.Panel restores only sort state but not the column state.

Is this a bug in 4.2.1 or am i missing any configurations for state management?


Code:

function onReady_demo() {
if (Ext.supports.LocalStorage)
{
Ext.state.Manager.setProvider( Ext.create('Ext.state.LocalStorageProvider') );
}
else
{
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider') );
}
Ext.override(Ext.view.AbstractView, {
onRender: function () {
var me = this;
me.callOverridden(arguments);
//if (me.loadMask && Ext.isObject(me.store)) {
// me.setMaskBind(me.store);
//}
}
});
var store_demo = Ext.create('Ext.data.JsonStore', {
autoLoad: true,

pageSize: 12,
proxy: {
type: 'ajax',
url: '/home/getdata',
reader: {
type: 'json',
root: 'results',
totalProperty: 'total'

}
},
listeners: {
beforeload: function( store, options )
{

if(demoIsLoadStoreFromCache)
{
demoIsLoadStoreFromCache = false;
Ext.getCmp('demo').getStore().loadPage(1);
Ext.getCmp('demo').getView().refresh();
return false;
}


}
},
fields: [{name:'type',type:'string'},{name:'CustomAction',type:'string'},{name:'Id',type:'string'},{name:'Name',type:'string'},{name:'CreationDate',type:'string'}],
baseParams:{cmd:'getData', objName:this.objName}
});

grid_demo = Ext.create('Ext.grid.Panel', {
forceFit:true ,
stateful: true,
stateId: '544_gridState_demo',
store: store_demo,
scroll: false,
tbar: headerFilterBar_demo,
selModel: sm,
colModel: [{ text: '', dataIndex: 'CustomAction', sortable: false ,renderer:ActionRenderer,width: 30},{ header: 'ID',text: 'ID', dataIndex: 'Uid',field: {xtype: 'textfield'}, width: 75,renderer:ViewOnlyFormLinkRenderer,filterable: false ,searchable: true,sortable: true,sortColumn: "CreationDateSorting"},{ header: 'Name',text: 'Name', dataIndex: 'Name',field: {xtype: 'textfield'}, width: 210,filterable: false ,searchable: true,sortable: true,sortColumn: "Name"},{ header: 'Creation Date',text: 'Creation Date', dataIndex: 'CreationDate',field: {xtype: 'textfield'}, width: 100,filterable: true ,searchable: true,sortable: true,sortColumn: "CreationDate"}],
EditContent:{UserStory:"420 ", Defect:"424"}, DeleteContent:{UserStory:"428 ", Defect:"405"},
bottomToolbar: demo_pagetoolbar,
dockedItems: demo_pagetoolbar ,
plugins: [ searchPlugin_demo],
renderTo: 'demo',
id: 'demo',
title: 'Demo',
width: null == null ? $(window).width() - $('#leftpanel').width()-20: null,
height: 520,
loadMask: false,
emptyText: 'No Records',
features: [filters],
listeners: {
sortchange: function(header, column, direction, eOpts)
{
var sortcolumn=IsNullOrUndefinedOrEmpty(column.sortColumn) ? column.dataIndex:column.sortColumn;
store_demo.proxy.url= updateQueryStringParameter(store_demo.proxy.url,'sort',sortcolumn);
store_demo.proxy.url= updateQueryStringParameter(store_demo.proxy.url,'dir',direction);
gridRefreshFun_demo();
}

}
});

}


Ext.EventManager.onWindowResize(AdjustdemoGridWidth);

scottmartin
22 Nov 2013, 3:09 PM
Does our online example work for you?
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#array-grid

prem.nagtilak
28 Nov 2013, 4:39 AM
Thanks for reply but i am not able to find source code of ext js library which is used for those examples.

scottmartin
28 Nov 2013, 6:46 AM
The code is on the right pane of the URL. If you want the local copy, it is in:
./examples/kitchensink/app/view/grid

prem.nagtilak
2 Dec 2013, 3:19 AM
Is Ext JS 4.2.1 capable of maintaining and restoring state of grid columns(width,position)? should i go for Ext 4.2.2.? I am using Cookie provider for state management and it's not working since i have upgraded it from 4.1 to 4.2.1, seems like upgrade has eaten so many functionality.

scottmartin
2 Dec 2013, 5:06 AM
You have not answered any of my questions ..


Is Ext JS 4.2.1 capable of maintaining and restoring state of grid columns(width,position)
Yes

Does our example work for you? Are the column changes saved?

prem.nagtilak
3 Dec 2013, 2:35 AM
Online example is also not working for me.

scottmartin
3 Dec 2013, 5:08 AM
Then you need to make sure your browser is not clearing out everything on close.
Also, try another browser as well.

If the example is not working, it is your browser.

mpatton27
4 Dec 2013, 2:06 PM
Hi Prem,
I don't think you are imagining this nor is it the fault of the browser (for once). We have observed the same buggy behavior in our Grid when we updated from 4.2.0 to 4.2.1 to take advantage of the new 'bufferedrenderer'. Switching back to 4.2.0 the State of the Grid Columns is preserved perfectly.

I've already done a 'diff' between the two versions on the 'Ext.state.Manager' and the 'Ext.state.LocalStorageProvider' classes. No updates were made there. Going to keep digging.

Kind regards,
Mark