PDA

View Full Version : [CLOSED] [4.2.2] grid.columns array is not updated when doing a reconfigure on a grid.



bmacdon1
4 Dec 2013, 11:11 AM
Ext version tested:

Ext 4.1.3
Ext 4.2.2


Browser versions tested against:

FF 25.0.1
Chrome 31.0.1650.57 m


DOCTYPE tested against:

<!DOCTYPE HTML>


Description:

In 4.1.3 (and below), doing a reconfigure on a grid would update the grid.columns array. This would allow you to access the correct columns at anytime. However, in 4.2.2, the grid.columns array is not updating. I am not sure if this applies to any 4.2.X version because I only tested on 4.2.2. I will be including a sample html page containing an example. You will need to adjust your extjs / resources paths accordingly.


Steps to reproduce the problem:

Setup a simple grid with columns to reconfigure.
Reconfigure the columns with new column data.


The result that was expected:

grid.columns should reflect the reconfigured columns.


The result that occurs instead:

grid.columns were not updated.


Additional debugging:


If you look at the console.logs in the 4.1.3 case below, you will notice the me.columns and the headerCt.items.getRange() are in sync.




reconfigure: function(store, columns) {
var me = this,
view = me.getView(),
originalDeferinitialRefresh,
oldStore = me.store,
headerCt = me.headerCt,
oldColumns = headerCt ? headerCt.items.getRange() : me.columns;


// Make copy in case the beforereconfigure listener mutates it.
if (columns) {
columns = Ext.Array.slice(columns);
}


me.fireEvent('beforereconfigure', me, store, columns, oldStore, oldColumns);
if (me.lockable) {
me.reconfigureLockable(store, columns);
} else {
Ext.suspendLayouts();
if (columns) {
if (columns) {
console.log(me.columns[0].el); // returns a dom element
console.log(headerCt.items.items[0].el); // returns a dom element

// new columns, delete scroll pos
delete me.scrollLeftPos;
headerCt.removeAll();


console.log(me.columns); // returns an empty array
console.log(headerCt.items.items); // returns empty array


headerCt.add(columns);
}
}
if (store) {
// Only unbind the store if a new one was passed
if (me.store) {
me.unbindStore();
}
store = Ext.StoreManager.lookup(store);


// On reconfigure, view refresh must be inline.
originalDeferinitialRefresh = view.deferInitialRefresh;
view.deferInitialRefresh = false;
me.bindStore(store);
view.deferInitialRefresh = originalDeferinitialRefresh;
} else {
me.getView().refresh();
}
headerCt.setSortState();
Ext.resumeLayouts(true);


console.log(me.columns[0].el); // returns a dom element
console.log(headerCt.items.items[0].el); // returns a dom element
}
me.fireEvent('reconfigure', me, store, columns, oldStore, oldColumns);
}



If you look at the console.logs in the 4.2.2 case below, you will notice the me.columns and the headerCt.items.getRange() are not in sync.




reconfigure: function(store, columns) {
var me = this,
view = me.getView(),
originalDeferinitialRefresh,
oldStore = me.store,
headerCt = me.headerCt,
oldColumns = headerCt ? headerCt.items.getRange() : me.columns;

// Make copy in case the beforereconfigure listener mutates it.
if (columns) {
columns = Ext.Array.slice(columns);
}

me.reconfiguring = true;
me.fireEvent('beforereconfigure', me, store, columns, oldStore, oldColumns);
if (me.lockable) {
me.reconfigureLockable(store, columns);
} else {
Ext.suspendLayouts();
if (columns) {


console.log(me.columns[0].el); // returns a dom element
console.log(headerCt.items.items[0].el); // returns a dom element

// new columns, delete scroll pos
delete me.scrollLeftPos;
headerCt.removeAll();


console.log(me.columns); // returns an array of grid columns
console.log(headerCt.items.items); // returns empty array


headerCt.add(columns);
}
// The following test compares the result of an assignment of the store var with the oldStore var
// This saves a large amount of code.
if (store && (store = Ext.StoreManager.lookup(store)) !== oldStore) {
// Only unbind the store if a new one was passed
if (me.store) {
me.unbindStore();
}


// On reconfigure, view refresh must be inline.
originalDeferinitialRefresh = view.deferInitialRefresh;
view.deferInitialRefresh = false;
me.bindStore(store);
view.deferInitialRefresh = originalDeferinitialRefresh;
} else {
me.getView().refresh();
}
headerCt.setSortState();
Ext.resumeLayouts(true);

console.log(me.columns[0].el); // returns undefined
console.log(headerCt.items.items[0].el); // returns a dom element
}
me.fireEvent('reconfigure', me, store, columns, oldStore, oldColumns);
delete me.reconfiguring;
}

evant
4 Dec 2013, 11:45 AM
Columns has never been a public property on the grid class. It may have been maintained in earlier versions, but it's not part of the API.

If you want to get the up to date leaf columns, you can use grid.getColumnManager().getColumns().

bmacdon1
4 Dec 2013, 12:05 PM
So based on that response, its safe to assume we should never reuse anything that is setup as a config property?

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.Panel-cfg-columns

(http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.Panel-cfg-columns)Thanks for the response though. I will look into using grid.getColumnManager().getColumns().

dpchrist
4 Dec 2013, 12:14 PM
But getColumnManager() is a private function. Will I have to worry about this being changed and breaking my code in a new version of ExtJS?

The ColumnManager class has this disclaimer at the top of the docs:

NOTE:
This is a private utility class for internal use by the framework. Don't rely on its existence.