How to add Select/Deselect All checkbox in columns of a ExtJs grid panel?

Question

I would like to add a Select/Deselect All Columns checkbox under Columns before the column names in a grid panel to show/hide all columns. As there are large number of columns in grid so user wants to select all then uncheck which they want to hide or deselect all and then check which they want to show. I am using ExtJS 3.4 version.

For example, select/deselect all checkbox should come before First Name among the list under Columns tree in below sample grid:

sample extjs grid panel

Thanks!

Answer 1

I don't think there is an out of the box solution to this. you could add a checkbox a the top and set all the menu check boxes to have a bind that will check all the boxes

bind: {
    checked: '{rullForThisCheckbox || checkAllCeckboxes}'
}

then you would set the checked in the top checkbox to just {checkAllCeckboxes}

Answer 2

You could access the columns menu and manually insert the select/deselect all checkbox. I have tested and it works, though it doesn't look pretty out of the box.

grid.getHeaderContainer().getMenu().add({
  xtype: 'checkboxfield',
  fieldLabel: '(de)select all',
})