CODEWITHSUNDEEP
javascriptextjs
David Smithson
David Smithson

Reputation: 464

dynamically hide ExtJS 4 grid column when grouping on column

I have an ExtJS 4 gridPanel as below:

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    title: 'grid',
    columns: [
        {text: 'column 1', sortable: true, width: 70, dataIndex: 'column1'},
        {text: 'column 2', sortable: true, width: 70, dataIndex: 'column2'},
        {text: 'column 3', sortable: true, width: 70, dataIndex: 'column3'},
        {text: 'column 4', sortable: true, width: 70, dataIndex: 'column4'},
    ],
    renderTo: Ext.get('gridDiv'),
    width: 800,
    height: 600,
    listeners: {
    },
    features: [{
        ftype: 'grouping'
    }]
});

I'm required to dynamically hide the column that the grid is being grouped by whenever the grid is grouped, and show all other columns - reshowing any previously hidden columns.

I understand that this would be a listener handler that catches the grouping changing, which would then fire column.hide().

Some pseudo-code:

...
listeners: {
    groupchange: function(store, groupers, eOpts) {
        groupers.forEach(function(group) {
            grid.columns.forEach(function(column) {
                if(column==group)
                    column.hide();
                if(column==group)
                    column.show();
            }
        }
    }
},
...

I'm not sure from the API documentation whether groupchange is an event that can be caught by the grid, rather than the store, how to access the contents of groupers, and what comparators are available to determine if a column is in groupers.

How should this listener event be structured? What are the correct events/methods/properties to use?

Upvotes: 1

Views: 3300

Answers (1)

David Smithson
David Smithson

Reputation: 464

Found that the hiding is done on a store listener, despite the grid panel API making it look as though it can be done as a grid listener. I've worked off the first keys array value within the groupers, although you could just as easily use items[0].property value.

var store = Ext.create('Ext.data.Store', {
    ...
    listeners:
    {
        groupchange: function(store, groupers, eOpts){
            var column = groupers.keys[0];
            productionItemGrid.columns.forEach(function(entry){
                if(entry.dataIndex == column)
                {
                    entry.setVisible(false);
                }
                else
                {
                    entry.setVisible(true);
                }
            });
        }
    }
    ...
});

Upvotes: 0

Related Questions