Extjs filtering is not Working properly

问题

I am new to ExtJS. I have written a code for applying filtering in a Grid, but it is not working properly. Attaching the code snippet which I have written for applying filtering. Without filters, the grid is properly displayed at the panel.

        Ext.create('Ext.data.Store', {
        storeId: 'userDetailsStore',
        fields: ['username', 'firstname', 'lastname', 'role', 'activeuser'],
        data: {'items': [
                {"username": 'USER1', "USER1-firstname": "firstname", "lastname": "USER1-lastname",
                    "role": 'Admin', "activeuser": 'Y'},
                {"username": 'USER2', "firstname": "USER2-firstname", "lastname": "USER2-lastname",
                    "role": 'Type1', "activeuser": 'Y'},
                {"username": 'USER3', "firstname": "USER3-firstname", "lastname": "USER3-lastname",
                    "role": 'Type2', "activeuser": 'Y'},
                {"username": 'USER4', "firstname": "USER4-firstname", "lastname": "USER4-lastname",
                    "role": 'Type3', "activeuser": 'Y'},
                {"username": 'USER5', "firstname": "USER5-firstname", "lastname": "USER5-lastname",
                    "role": 'Admin', "activeuser": 'Y'},
                {"username": 'USER6', "firstname": "USER6-firstname", "lastname": "USER6-lastname",
                    "role": 'Type4', "activeuser": 'Y'}
            ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    var filters = Ext.create('Ext.ux.grid.FiltersFeature',
            {
        // ftype: 'filters',
        encode: false,
        autoReload: false,
        local: true,
        filters: [{
                type: 'string',
                dataIndex: 'username'
            }, {
                type: 'string',
                dataIndex: 'firstname',
                disabled: true
            }, {
                type: 'string',
                dataIndex: 'lastname'
            }, {
                type: 'list',
                dataIndex: 'role',
                options: ['Admin', 'Type1', 'Type2', 'Type3', 'Type4'],
                phpMode: true
            }, {
                type: 'string',
                dataIndex: 'activeuser'
            }]
    };

    var user_view_grid = new Ext.create('Ext.grid.Panel', {
        title: 'User Details',
        border: false,
        align: 'stretch',
        store: Ext.data.StoreManager.lookup('userDetailsStore'),
        loadMask: true,
        features: [filters],
        bbar: Ext.create('Ext.toolbar.Paging', {
            store: Ext.data.StoreManager.lookup('userDetailsStore')
        }),
        columns: [
            {header: 'Username', dataIndex: 'username', flex: 1},
            {header: 'FirstName', dataIndex: 'firstname', flex: 1},
            {header: 'LastName', dataIndex: 'lastname', flex: 1},
            {header: 'Role', dataIndex: 'role', flex: 1},
            {header: 'ActiveUser', dataIndex: 'activeuser', align: 'center'}
        ],
        height: 200
    });

    var user_view_panel = new Ext.Panel({
        region: 'north',
        margins: '2 0 0 0',
        cmargins: '5 5 0 0',
        height: 200,
        split: true,
        collapsible: false,
        border: true,
        xtype: 'panel',
        bodyStyle:
                {
                    "background-color": "#F8F8F8",
                    "padding-left": "5px",
                    "padding-right": "5px",
                    "padding-bottom": "5px"
                },
        items: [
            user_view_grid
        ]
    });

    Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [{
                layout: 'border',
                defaults: {
                    collapsible: false,
                    split: false,
                    bodyStyle: 'padding:2px'
                },
                items: [
                    {
                        collapsible: false,
                        region: 'center',
                        title: 'User Management',
                        bodyStyle: {"background-color": "#F8F8F8"},
                        layout: {
                            type: 'border',
                            align: 'stretch'
                        },
                        items: [
                            user_view_panel
                        ]
                    }
                ]
            }],
        renderTo: Ext.getBody()
    });

I am using extjs-4.2.2

回答1:

In browser console, you should have gotten a 404 error, because "feature/filters.js couldn't be loaded". This is because ftype:'filters' does not provide information which file ExtJS has to include to have the required javascript available. You can load the file manually before applying an ftype:

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

which tells ExtJS to load the file src/ux/grid/FiltersFeature.js, or you can take the approach without ftype:

var filters = Ext.create('Ext.ux.grid.FiltersFeature',{
    encode: false,
    ...

来源：https://stackoverflow.com/questions/37851488/extjs-filtering-is-not-working-properly