Adding grid filters using FilterFeatures

[Johnbran]

Hello,

How would I add a filter to a grid colum like the ones demoed here. I know it is an extension and from what I can tell they are not directly supported in Architect yet. But there must be a way to do it. Any ideas? I know I have to add...

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

but I dont know where or how.

Thanks

[mboreback]

A simple filtering can be added as fields in the toolbar
Here is a simple example of filtering a grid n one field, but can be extended with using multiple fields in the filtering

var aStore = Ext.StoreMgr.lookup('AStore');
var newValue = textfield.getValue();
var filterTxt = new RegExp(".*" + newValue + ".*", "ig");
aStore.clearFilter();
if (newValue.length > 0){
aStore.filter("text", filterTxt);
}

[Johnbran]

Thanks for the reply. I am aware that it would be simple enough to filter the store, but the real feature I want is the filter box that shows up when you click the down arrow at the column heading (see link in original post).
Thanks

[ssamayoa]

Inclute the necesary ux files from html file othen than SA's app.html. Then create an override in the grid component to include filter feature.

Regards.

[lazos]

When I use the filter option on the grid I get the following error when passing through the menu on the column

[mikael.karon]

I'm trying to do exactly this, but without luck. If you could attach some code and/or an example I'd be very happy.

/ Mike

Inclute the necesary ux files from html file othen than SA's app.html. Then create an override in the grid component to include filter feature.

Regards.

[agruss]

Hello,

I am facing the same problem, I have trouble finding a solid guide how to use overrides correctly and especially for the FilterFeatures I would love to see a working example.

cheers
/anja

[msinn]

In my case it wokrs when I:

1. add the css files to the custom index.html

<link rel="stylesheet" type="text/css" href="data/js/extjs4/examples/ux/grid/css/GridFilters.css"/>
<link rel="stylesheet" type="text/css" href="data/js/extjs4/examples/ux/grid/css/RangeMenu.css"/>

2. configure the loader

Ext.Loader.setConfig({
    disableCaching: false,
    enabled: true,
    paths: {
        'Ext.ux': 'data/js/extjs4/examples/ux',
        'Ext.ux.exporter': 'data/js/extjs4ux/exporter',
        'Ext.ux.gridprinter': 'data/js/extjs4ux/gridprinter'
    }
});

3. require the feature

Ext.application({
    requires: [
        'Nav.view.override.CheckColumn',
        'Ext.ux.grid.FiltersFeature',
        'Ext.ux.exporter.Exporter',
        'Ext.ux.gridprinter.Printer'
    ],
...

4. copy and paste the feature configuration into the Filter or Quick Value Set field near the top of the config panel and then click on the Add button, e.g.

features: {
                ftype: 'filters',
                autoReload: false,
                local: true,
                updateBuffer: 1000,
                filters: [
                    {
                        type: 'numeric',
                        dataIndex: 'No'
                    },
                    {
                        type: 'string',
                        dataIndex: 'Name'
                    },
                    {
                        type: 'string',
                        dataIndex: 'Post_Code'
                    },
                    {
                        type: 'string',
                        dataIndex: 'City'
                    },
                    {
                        type: 'string',
                        dataIndex: 'Country_Region_Code'
                    },
                    {
                        type: 'string',
                        dataIndex: 'Language_Code'
                    },
                    {
                        type: 'list',
                        dataIndex: 'Blocked',
                        options: [
                            'Ship',
                            'Invoice',
                            'All'
                        ],
                        phpMode: true
                    },
                    {
                        type: 'boolean',
                        dataIndex: 'Checked'
                    },
                    {
                        type: 'date',
                        dataIndex: 'Cheched_at_date'
                    },
                    {
                        type: 'date',
                        dataIndex: 'Next_check_at'
                    }
                ]
            }

[agruss]

that worked fine with me too.

[alihamza007]

Can you please share some sample application? I am unable to add filter fearture.