Adding grid filters using FilterFeatures

[ByteLess]

how did you add that plugin to the grid?

I able to replicate exaclty as you mentioned, but filters are not showing, and it won't because I haven't added that newly defined plugin to my grid?

how do I add that feature to my plugins[] within the sencha architect.

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'
                    }
                ]
            }

[msinn]

@ ByteLess

I'm adding the feature as described above, so copy the above code and paste it into the search field of the config panel and push the button Add. This works when you'll add just one feature to your grid.

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'
        }
    ]
} 

If you need to add more features to your grid, then you have to do it in an override:

Ext.define('Nav.view.override.Blacklist', {
    requires: 'Nav.view.Blacklist'
}, function() {
    Ext.override(Nav.view.Blacklist, {
        features: [
            {ftype: 'summary'},
            Ext.create('Ext.ux.grid.FiltersFeature',{
            buffer:1000,
            filters:[
                {"type":"string","dataIndex":"Name"},
                {"type":"string","dataIndex":"Address"},
                {"type":"string","dataIndex":"Post_Code"},
                {"type":"string","dataIndex":"City"},
                {"type":"string","dataIndex":"Contact"},
                {"type":"string","dataIndex":"E_Mail"},
                {"type":"numeric","dataIndex":"Balance"},
                {"type":"numeric","dataIndex":"Balance_Due"},
                {"type":"numeric","dataIndex":"Reminder_Amounts"},
                {"type":"numeric","dataIndex":"No_of_Issued_Reminder"}]
            })
        ]
    });
});