Extjs6 Excel like grid filters with store

Question

I am trying to create a complex filter for a grid. I want the following general behavior:

The filters have a different store than the grid
Apply filter on column A
The grid is filtered based on my selection
The filter in column B will show the available items

Also, the grid has a button that clears all the filters and more, remove the checked items from the filters.

Based on this link I've tried to do something similar. I've created also a fiddle.

Regarding the fiddle, I have some question:

1.The following code returns undefined. Based on the documentation it should return a Menu object.

business.filter.menu = business.filter.createMenu({
        store: localStore
})

2.I want to clear the checked items when user press the Clear Inline Filter button.

    var f = Ext.ComponentQuery.query('test-grid')[0].getColumnManager().getHeaderByDataIndex(element).filter;
    if (f.menu) {
        for (var j = 0; j < f.menu.items.length; j++) {
            f.menu.items.items[j].setChecked(false)
        }
    }

Here the, f.menu is always undefined so I can't clear the checkbox. Somehow I lose reference to menu.

How to clear the checkboxes based on my scenario? Why the createMenu returns undefined?

Edit

The accepted answer worked for this specific question(fiddle)

Mastacheata Mastacheata · Accepted Answer · 2017-10-27T14:48:57

On a general note: Don't call methods/use properties explicitly marked private in the documentation. This usually means the way you're doing something is wrong and there is another more automated way to achieve that. Especially don't take Ext4 examples and port them 1:1 to Ext5 or Ext6. The Framework changed quite a lot in Ext5 and a little more in Ext6.

In this case the filter menu is supposed to be created automatically from the filter store without human interaction. In order to uncheck a menu items, simply stop filtering by that value.

Using the ColumnManager to find a certain column is also a reserved for internal use, but I can see why you'd want to go that way. It's easier than filtering the response form getColumns by hand.

Extjs6 Excel like grid filters with store

1 Answers