PDA

View Full Version : Stateful Grouped Header Grid?



brendanjohnston
8 Aug 2011, 7:05 AM
I've had some difficulty using stateful Grouped Headers. The getState method of the Ext.panel.Table class (as of 4.0.2) doesn't appear to traverse sub-columns.

I've worked around this limitation by copying and overriding both getState and applyState in my own Grid.

Will this issue be resolved in upcoming releases?


getState: function(){

function iCreateStateHeader (header) {

var column = {
id: header.headerId
};

if (header.hidden !== (header.initialConfig.hidden || header.self.prototype.hidden)) {
column.hidden = header.hidden;
}

if (header.sortable !== header.initialConfig.sortable) {
column.sortable = header.sortable;
}

if (header.flex) {
if (header.flex !== header.initialConfig.flex) {
column.flex = header.flex;
}
} else {
if (header.width !== header.initialConfig.width) {
column.width = header.width;
}
}

return column;
}

var state = this.callParent(),
sorter = this.store.sorters.first();

state.columns = [];

for (var i = 0; i < this.headerCt.items.items.length; i++) {

state.columns[i] = iCreateStateHeader(
this.headerCt.items.items[i]
);

if (this.headerCt.items.items[i].items) {

state.columns[i].columns = [];

for (var j = 0; j < this.headerCt.items.items[i].items.items.length; j++) {

state.columns[i].columns[j] = iCreateStateHeader(
this.headerCt.items.items[i].items.items[j]
);
}
}
}

if (sorter) {
state.sort = {
property: sorter.property,
direction: sorter.direction
};
}

return state;
},

applyState: function(state) {

function iApplyStateHeader (header, column) {

if (Ext.isDefined(column.hidden)) {
header.hidden = column.hidden;
}

if (Ext.isDefined(column.sortable)) {
header.sortable = column.sortable;
}

if (Ext.isDefined(column.flex)) {

delete header.width;
header.flex = column.flex;

} else if (Ext.isDefined(column.width)) {

delete header.flex;
header.minWidth = column.width;

if (header.rendered) {
header.setWidth(column.width);
} else {
header.width = column.width;
}
}
}

this.headerCt.suspendLayout = true;

// need to work this out?
// this.callParent(arguments);

for (var i = 0; i < state.columns.length ; i++) {

var column = state.columns[i];

var header = this.headerCt.down('gridcolumn[headerId=' + column.id + ']');

var index = this.headerCt.items.indexOf(header);

if (i !== index) {
this.headerCt.moveHeader(index, i);
}

iApplyStateHeader(header, column);

if (column.columns) {

for (var j = 0; j < column.columns.length; j++) {

var subColumn = column.columns[j];

var subHeader = this.headerCt.down('gridcolumn[headerId=' + subColumn.id + ']');

var subIndex = header.items.indexOf(subHeader);

if (j !== subIndex) {

// only works for Ext.grid.header.Container
// header.moveHeader(subIndex, j);

// use with caution, doesn't fire events!
header.move(subIndex, j);
}

iApplyStateHeader(subHeader, subColumn);
}
}

}

this.headerCt.suspendLayout = false;

this.headerCt.doLayout();

if (state.sort) {
if (this.store.remoteSort) {
this.store.sorters.add(Ext.create('Ext.util.Sorter', {
property: state.sort.property,
direction: state.sort.direction
}));
} else {
this.store.sort(
state.sort.property,
state.sort.direction
);
}
}

}