how to show/hide column in a extjs 3.4 grid panel

Question

I've gone through the previous posts of the same question and none of them couldn't solve my problem. I have a grid panel with a specific column as hidden. I need to show that column when a combobox selection changes.

Here is my code

Store1 = new Ext.data.JsonStore({
url: 'url',
root: 'rows', 
autoLoad: true,
fields: ['field1', 'field2']
});

            Grid1 =
                {
                    xtype: 'grid',
                    id: 'grid1',
                    autoHeight: true,
                    autoWidth: true,
                    autoScroll: true,
                    border: false,
                    trackMouseOver: false,
                    frame: true,
                    store: Store1,
                    columns: [
                        { header: 'Col1', dataIndex: 'field1'},
                        { header: 'Col2', dataIndex: 'field2', 
                          renderer: function (value, metaData, record, rowIndex, colIndex, store) {

                                if (isShow==true) {
                                    value = 100;
                                }
                                else {
                                    hideCols(Ext.getCmp('grid1'));
                                }
                                return value;
                            }}
                  ]};



                xtype: 'combo',
                store: comboStore,
                fieldLabel: 'title',
                displayField: 'title', 
                valueField: 'title',
                typeAhead: false,
                editable: false,
                allowBlank: false,
                mode: 'local',
                forceSelection: true,
                triggerAction: 'all',
                name: 'combo1',
                selectOnFocus: true
                , onSelect: function (cmb) {
                    isShow = true;
                    showCols(Ext.getCmp('grid1'));
                }

// methods
hideCols = function (grid) {
grid.getColumnModel().setHidden(grid.getColumnModel().findColumnIndex('filed2'), true);
};
showCols = function (grid) {             grid.getColumnModel().setHidden(grid.getColumnModel().findColumnIndex('filed2'), false);
};

Where I went wrong?

orientalpers orientalpers · Accepted Answer · 2014-03-18T06:25:24

A typo in the word "filed2": grid.getColumnModel().findColumnIndex('filed2')

Some recomendations:

If you dont want show column in startup, use column property hidden:true. Not change visibility in renderer, it has low performance.

Your column config will be:

{
header: 'Col2',
dataIndex: 'field2',
hidden: true,
renderer: function (value, metaData, record, rowIndex, colIndex, store) {
    return 100;
}
}

Dont use onSelect property, it is private method.

Use event subscribe:

name: 'combo1',
selectOnFocus: true,
listeners: {
    select: function(cmb){
        showCols(Ext.getCmp('grid1'));
    }
}

how to show/hide column in a extjs 3.4 grid panel

1 Answers