PDA

View Full Version : Ext JS 4.2 Stateful Grid Column Ordering Issue



cpsarathe
10 Jan 2015, 6:08 AM
Browser - Chrome , IE Latest version
Ext JS - 4.2

I have a stateful Grid with dynamic columns in it , and I found a bug when grid is stateful and columns are dynamically added or removed , below is the scenario -

1. Open a Grid first time with below code and like below image.
51475

2. Expand the width of first column Name and then reload the page , below screen should appear -
51476

3. Now from Grid source code delete this
{
text: 'Email',
dataIndex: 'email'

}, save it and from browser reload the page again.
Screen appears like below
51477

So as shown in above image first column moved to in between other columns which ideally shouldn't happen ?

Below is the code to try the case.



Ext.define('Dummy.view.grid.MyAppGrid',{
extend :'Ext.grid.Panel',
alias : 'widget.myappgrid',
title: 'My App Grid',
selType: 'cellmodel',
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email'

}, {
text: 'Phone1',
dataIndex: 'phone1'
},
{
text: 'Phone2',
dataIndex: 'phone2'
},{
text: 'Phone3',
dataIndex: 'phone3'
},{
text: 'Phone4',
dataIndex: 'phone4'
}],
height: 400,
width: 500,
selType :'cellmodel',
stateful : true,
stateId: 'gridacxf'
});

var data = [];
var i = 0;
while (i < 400) {
++i;
data.push(['User ' + i, 'user' + i + '@test.com', '888-5555-1234', '888-5555-1234', '888-5555-1234', '888-5555-1234']);
}

var store = Ext.create('Ext.data.ArrayStore', {
storeId: 'myStore',
fields: ['name', 'email', 'phone1', 'phone2', 'phone3', 'phone4'],
data: data
});

var myappGrid = Ext.create(Dummy.view.grid.MyAppGrid', {
title: 'MyAppGrid',
store: store,
renderTo: 'executionView'
});




I also found the problem area in EXT JS
Ext.grid.header.Container API -



applyColumnsState: function(columns) {
if (!columns || !columns.length) {
return;
}

var me = this,
items = me.items.items,
count = items.length,
i = 0,
length = columns.length,
c, col, columnState, index;

for (c = 0; c < length; c++) {
columnState = columns[c];

for (index = count; index--; ) {
col = items[index];
if (col.getStateId && col.getStateId() == columnState.id) {
// If a column in the new grid matches up with a saved state...
// Ensure that the column is restored to the state order.
// i is incremented upon every column match, so all persistent
// columns are ordered before any new columns.
if (i !== index) {
me.moveHeader(index, i);
}

if (col.applyColumnState) {
col.applyColumnState(columnState);
}
++i;
break;
}
}
}
},

cpsarathe
14 Jan 2015, 6:28 AM
Can anyone please check and update ? I believe its possible a bug.

lumberjack
14 Jan 2015, 9:59 AM
I'd recommend assigning a stateId to each column configuration. This will alleviate any issues with columns being added/removed dynamically.

In the fiddle below I took these steps:
Hide "Phone" column, rerun fiddle and it's hidden as expected
Remove the "Email" column config, rerun fiddle and "Phone" is still hidden
Add the "Email" column config back in, rerun fiddle and "Phone" is still hidden
Regards,
Brian

gfc