Extjs 过滤无法正常工作

Question

我是 ExtJS 的新手。我已经编写了一个在网格中应用过滤的代码，但它不能正常工作。附上我为应用过滤而编写的代码 sn-p。 没有过滤器，网格会正确显示在面板上。

        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()
    });

我正在使用 extjs-4.2.2

Answer 1

在浏览器控制台中，您应该收到 404 错误，因为“无法加载feature/filters.js”。这是因为ftype:'filters' 没有提供ExtJS 必须包含哪些文件才能使所需的javascript 可用的信息。您可以在应用 ftype 之前手动加载文件：

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

告诉 ExtJS 加载文件src/ux/grid/FiltersFeature.js，或者你可以采用不带ftype的方法：

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