EXTJS 4 网格本地过滤不起作用

Question

我有一个带有远程存储的网格，
我想在网格上应用过滤器，
检查 Chrome 控制台时，它会出现在那里：

 this.filters <RETURN>

    i { ftype: "filters", local: true, filters: i,
                deferredUpdate: Ext.util.DelayedTask, filterConfigs: Array[1]…}
        deferredUpdate: Ext.util.DelayedTask
        filterConfigs: Array[1]
            0: Object 
                dataIndex: "offercount"
                type: "numeric"
       ...

但 extjs 桌面网格中没有可用的过滤器。
这是网格的代码：

{ xtype:'grid', id: 'Grid121', list_id:'121', 
    store: {xtype:'store',
        id:'Store121',
        autoLoad: {start: 0, limit: 20},
        fields:[
            {name: 'url', type: 'String' },
            {name: 'offercount', type: 'int' },
            {name: 'plattform'},],
        pageSize: 20, 
        groupField: '',
        remoteSort:true, remoteFilter :true, remoteGroup :true, 
        proxy: {
            type: 'ajax',
            url: absolutePath +'AJAXRequest/Object/121/GetData/', 
            reader: { type: 'json',root: 'rows',totalProperty: 'results'},
            writer_url: absolutePath +'AJAXRequest/Object/121/SetData/', 
        },
        filters: [
            {property: 'searchstring',value   : ''},
            {property: 'searchtype',value   : 0},
        ],
        listeners: 
            {update: function(store,record,  operation,modifiedFieldNames, eOpts ){
                    if(operation==Ext.data.Model.EDIT)
                        submitRow(record,modifiedFieldNames);
                },
            },
    },
    columns: [
            {xtype: 'rownumberer', header:'Pos.',width:40},
            { header: 'URL', dataIndex: 'url', sortable: true, filterable: true, width:217, autoSize: true, },
            { header: 'Angebote', dataIndex: 'offercount', sortable: true, filterable: true,minWidth:80, autoSizeColumn: true, },
            { header: 'Plattform', dataIndex: 'plattform', sortable: true, filterable: true,minWidth:80, autoSizeColumn: true, },
            { xtype:'actioncolumn', width:40, tdCls:'editRow', items:[ { handler: function(gridview, rowIndex, colIndex){grid =gridview.up('panel');var editor = grid.getPlugin(); var rec = gridview.getStore().getAt(rowIndex);editor.startEdit( rec,grid.columns[colIndex]); } } ] }
    ],
    selModel:{
        mode:"SIMPLE",listeners:{
            selectionchange:function (selection, selected, eOpts ){
                checkListDelete(selection, selected, eOpts);        
            }
        }
    },
    viewConfig: {
        enableTextSelection: true,
    },
    features: [{
        ftype: 'filters', local: true, filters: [
            {   type: 'numeric',
                dataIndex: 'offercount' 
            },
        ],
    },],
    plugins: [{ptype: 'rowediting',clicksToMoveEditor: 1,autoCancel: false,clicksToEdit :2},],
    listeners: {
        columnhide: function ( ct, column, fromIdx, toIdx, eOpts ){listColumnHide(ct, column, eOpts);},
        columnshow: function ( ct, column, fromIdx, toIdx, eOpts ){listColumnShow(ct, column, eOpts);},
        columnmove: function ( ct, column, fromIdx, toIdx, eOpts ){listColumnMoved(ct,column,fromIdx, toIdx);},
        columnresize: function( ct, column, width, eOpts ){listColumnResized(ct,column,width);},
        itemdblclick: function (view,record,item,index,event,eventOptions){
            null
        },
    },
    dockedItems: [
        {xtype: 'pagingtoolbar',store:'Store121',  id: 'pagingtoolbar121', dock: 'top', displayInfo: true, plugins: new Ext.ux.ProgressBarPager()},

    ]
}

以及包含的脚本：

<script >
Ext.require([
    '/System.List',
    'Ext.ux.grid.*',
    'Ext.ux.grid.FiltersFeature'
]);
</script>

我一周以来一直在寻找解决方案，但我就是不明白......

Answer 1

试试这样：

var filters = {
    ftype: 'filters',
    // encode and local configuration options defined previously for easier reuse
    encode: false, // json encode the filter query
    local: true,   // defaults to false (remote filtering)

    // Filters are most naturally placed in the column definition, but can also be
    // added here.
    filters: [
        {
            type: 'boolean',
            dataIndex: 'visible'
        }
    ]
};

var myGrid = new Ext.create('Ext.ux.LiveSearchGridPanel', {
    selType: 'cellmodel',
    store: store,
    ...
    columns:[
        {
            header: "Header",
            width: 90,
            sortable: true,
            dataIndex: 'INDEX',
            filterable: true,  //<---
            filter:{
                type:'string'  //<---
            }
        }
        ...
        features: [filters]  //<---
});