ExtJs 4 : hide/show grid columns with grid that uses ArrayStore

Question

ExtJs 4 :
How can I dynamically show and hide columns of a grid that is using an ArrayStore as its store?
I have found this solution
ExtJs 4: How do I hide/show grid columns on the fly?
I know the setVisible(true | false) for each column is required, but when I ask for grid.columns I get an array of Objects, and as Objects they don't have the setVisible function.
If I use Ext.getCmp(..) for each specific column using the column's id then I am getting back a Column object and I'm able to get access to the SetVisible function.. but is it also possible to get an array of these Column objects from the grid?

Answer 1

You can find more here http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Column

You can use show() and hide() methods

 grid.columns[index].show();

or absolutely you can use setVisible() methods;

 grid.columns[index].setVisible(false);

Answer 2

The solution in ExtJs 4: How do I hide/show grid columns on the fly? should work for you. What exact version of ExtJS are you using?

When using grid.columns the array of objects you get returned are Column objects. Therefore the following code (as detailed in the linked answer) should work.

grid.columns[0].setVisible(false);

Check out this GridPanel Fiddle for a live example.

Answer 3

You should be doing something like this:

var myGrid = Ext.getCmp("Your_GRID");
var cols = myGrid.columns;
//index of the column to hide.
cols[index].setVisible(!cols[index].isVisible())

Here is my working example in fiddle: https://fiddle.sencha.com/#fiddle/oca