Ext JS 4: Show all columns in Ext.grid.Panel as custom option

Posted by MacGyver on Stack Overflow See other posts from Stack Overflow or by MacGyver
Published on 2012-08-27T16:14:51Z Indexed on 2012/08/27 21:38 UTC
Read the original article Hit count: 287

Filed under:
|
|
|

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');
                    }
                }]);           
            }
        }
    });

enter image description here

===========================

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();
                            }
                        });
                    }
                }]);
            }

© Stack Overflow or respective owner

Related posts about extjs

Related posts about grid