PDA

View Full Version : Hide child columns in nasted header grid in ExtJS4



banel
27 Mar 2012, 1:07 AM
How should I hide child columns in a nested header grid in Extjs4?
I have a column [Column1] with 3 subcolumns: [Column1.1],[Column1.2],[Column1.3], and I want to hide/show dynamically [Column1.1].
I've tried 2 methods:
1. columns[i].setVisible(!hidden);


setHiddenColumn: function (columns,dataIndexContents, hidden) {
var columnCount = columns.length, i;

var dataIndex;
for (i = 1; i < columnCount; i++) {
dataIndex = columns[i].dataIndex;
if (dataIndex != null) {//leaf column
if (dataIndex && dataIndex.indexOf(dataIndexContents) >= 0) {
columns[i].setVisible(!hidden);
}
} else {//parentColumn
this.setHiddenColumn(columns[i].getGridColumns(), dataIndexContents, hidden);
}
}
}
and

2. columnModel.getHeaderAtIndex(i).setVisible(!hidden)

setHiddenColumn: function (dataIndexContents, hidden) {
var columnModel = this.headerCt, columnCount = columnModel.getColumnCount();
for (var i = 1; i < columnCount; i++) {
var dataIndex = columnModel.getHeaderAtIndex(i).dataIndex;
if (dataIndex && dataIndex.indexOf(dataIndexContents) >= 0) {
var currentColumn = columnModel.getHeaderAtIndex(i);
currentColumn.setVisible(!hidden); //tried also hide()/show() methods
}
}
The problem occurs when I call this.getView.refresh() method. Only the content of the grid is refreshed, not also the header, and the width of the columns seams to be calculated without considering that there are some hidden columns.

Any idea?
Thanks

mitchellsimoens
27 Mar 2012, 10:22 AM
On what Ext JS 4 version?

banel
28 Mar 2012, 12:53 AM
It's on ExtJS 4.0.7

mitchellsimoens
28 Mar 2012, 4:34 AM
I added this to the group-header-grid.html example as a test:


dockedItems : [
{
xtype : 'toolbar',
dock : 'top',
items : [
{
text : 'Hide Price Column',
handler : function(btn) {
var grid = btn.up('gridpanel'),
group = grid.columns[1],
col = group.getComponent(0);

col.hide();
}
}
]
}
]