Geek Answers Handbook

ExtJs 4: How to hide / show grid columns on the fly?

I need to show / hide the grid columns on the fly, but it seems that ExtJs 4 does not have an implemented method for this.

In previous versions, I should use columnModel, which no longer exists.

Just get grid.columns[index] and hide() or show() does not affect the grid.

Using grid.columnManaget.getColumns()[index].hide() can really hide the column, but it cannot be shown again (since getColumns() does not return this column after that).

+6
source share
3 answers

The following should work:

 Ext.create('Ext.grid.Panel', { title: 'Simpsons', id: 'simpsons', store: Ext.data.StoreManager.lookup('simpsonsStore'), columns: [ { text: 'Name', dataIndex: 'name' }, { text: 'Email', dataIndex: 'email', flex: 1 }, { text: 'Phone', dataIndex: 'phone' } ], height: 200, width: 400, renderTo: Ext.getBody(), dockedItems:[{ xtype:'button', handler: function() { if(Ext.getCmp('simpsons').columns[0].isVisible()) Ext.getCmp('simpsons').columns[0].setVisible(false); else Ext.getCmp('simpsons').columns[0].setVisible(true); } }] });
+9
source

The following should work:

 Ext.getCmp('simpsons').down('[dataIndex=ColumnName]').setVisible(false);
+2
source

Access "your grid" and then

 yourGrid.columnManager.getColumns()[index].setVisible(false);

If you want to do - EXT 4

 parent.doLayout();

EXT 6

 parent.updateLayout();
+2
source

More articles:


All Articles