Ext JS 4: Show all columns in Ext.grid.Panel as custom option
- by MacGyver
Is there a function that can be called on an Ext.grid.Panel in ExtJS that will make all columns visible, if some of them are hidden by default? Whenever an end-user needs to show the hidden columns, they need to click each column. Below, I have some code to add a custom menu option when you select a field header. I'd like to execute this function so all columns show.
As an example below, I have 'Project ID' and 'User Created' hidden by default. By choosing 'Select All Columns' would turn those columns on, so they show in the list view.
listeners: {
...
},
afterrender: function() {
var menu = this.headerCt.getMenu();
menu.add([{
text: 'Select All Columns',
handler: function() {
var columnDataIndex = menu.activeHeader.dataIndex;
alert('custom item for column "'+columnDataIndex+'" was pressed');
}
}]);
}
}
});
===========================
Answer (with code):
Here's what I decided to do based on Eric's code below, since hiding all columns was silly.
afterrender: function () {
var menu = this.headerCt.getMenu();
menu.add([{
text: 'Show All Columns',
handler: function () {
var columnDataIndex = menu.activeHeader.dataIndex;
Ext.each(grid.headerCt.getGridColumns(), function (column) {
column.show();
});
}
}]);
menu.add([{
text: 'Hide All Columns Except This',
handler: function () {
var columnDataIndex = menu.activeHeader.dataIndex;
alert(columnDataIndex);
Ext.each(grid.headerCt.getGridColumns(), function (column) {
if (column.dataIndex != columnDataIndex) {
column.hide();
}
});
}
}]);
}
