"Cannot call method 'getColumns' of undefined " on FiltersFeature of LiveSearchGridPanel ExtJS

Question

im getting the Uncaught TypeError: Cannot call method 'getColumns' of undefined when clicking on the header toolbar of a Live Serach Grid Panel on ExtJS. Im implementing filters with the Filters Feature.

Heres some of my code:

Ext.require([
'Ext.grid.*',
'Ext.ux.grid.FiltersFeature',
'Ext.ux.LiveSearchGridPanel'
...
]);

var filters = {
    ftype: 'filters',
    encode: false,
    local: true  
};

var grid = new Ext.create('Ext.ux.LiveSearchGridPanel', {
    selType: 'cellmodel',
    store: store,
    columns:[
    {
        header: "Evento",
        width: 90,
        sortable: true,
        filterable: true,
        dataIndex: 'RH_DESCRIPCION',
        filter: {
            type: 'string'
        }
    }],
    features: [filters]
 ...

This is the block of code where the exception occurs:

Ext.Array.each(grid.columnManager.getColumns(), function (column) {
//Uncaught TypeError: Cannot call method 'getColumns' of undefined
        if (column.filterable === false) {
            filters.removeAtKey(column.dataIndex);
        } else {
            add(column.dataIndex, column.filter, column.filterable);
        }
    });

Any help will be appriciated!

Answer 1

After doing heavier debugging it seems that grid.columnManager isn't very well supported on version 4.2. For any others with the same issue you should use:

grid.down('headercontainer').getGridColumns();

or

grid.down('headercontainer').getVisibleGridColumns();

to get a hold of columns on your grid. I believe this won't work with grouped columns, I've not tested it though.

Answer 2

Ext.Array.each(grid.columnManager.getColumns(), function (column) ...

change to

Ext.Array.each(grid.columns, function (column) {

it works well :)

Answer 3

grid.columns is not a supported/public property. It might not contain, for example, columns added with reconfigure. It will contain them if you use 4.2.0, but not in 4.2.1/4.2.2. This will happen even if you add Ext.selection.CheckboxModel, the checkbox column will not be included there in 4.2.2 and you will end up with "index mismatch" if you get the index from, lets say cellClick event.

Unfortunately, grid.columnManager or grid.getColumnManager() is new in 4.2.1/4.2.2 and it is a private property/method. Shortly speaking, either of those might stop working with next releases of ExtJS, and "columns" property is not reliable in all cases.

See some discussion here: http://www.sencha.com/forum/showthread.php?277525

I haven't found any officially supported solution yet. I can't add comments, so I had to publish this as a full answer, thanks S.O.!

Answer 4

As others already posted, you should not use the columnManager property. Check Sencha's note about it:

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.ColumnManager

This is a private utility class for internal use by the framework. Don't rely on its existence.

I think the best option is to use this for all columns:

grid.headerCt.getGridColumns()

And this if you only need the visible columns:

grid.headerCt.getVisibleGridColumns()