Question

我正在使用Ruby On Rails + Ext js应用程序..我正在尝试使用过滤器功能显示网格，但我不能阅读很多帖子甚至是Sencha示例页面，但我不能使它工作。

这是实时代码..没有网格面板工作的简单网格https://fiddle.sencha.com/#fiddle/3fh

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.ux.grid.FiltersFeature',
    'Ext.toolbar.Paging'
]);



var store = Ext.create('Ext.data.Store', {

   fields: [
           {name: 'tipo', type: 'string'},
           {name: 'concepto', type: 'string'},
           {name: 'ingreso', type: 'int'},
           {name: 'egreso', type: 'int'},
           {name: 'por_alicuota', type: 'float'},
           {name: 'fecha', type: 'string', dateFormat:'m/Y'}
       ] ,     

   data: [
{tipo:'Fijo',concepto:'Ingresos por Cuotas',ingreso:345000,egreso:0,por_alicuota:0,fecha:'11/2013'},
{tipo:'Extra',concepto:'Ingresos por Sanciones',ingreso:24500,egreso:0,por_alicuota:0,fecha:'11/2013'}

          ],

})

var filtersCfg = {
        ftype: 'filters',
        local: true,
        filters: [{
                type: 'string',
                dataIndex: 'tipo'
            }, {
                type: 'string',
                dataIndex: 'concepto'
            }]
    };

var grid =   Ext.create('Ext.grid.Panel', {
        renderTo: Ext.getElementById("leftPanel"),
        store: store,
        height: 300,
        filters : [filtersCfg],
        title: "grid view",

        columns: [
             {
                text: 'Pay',
                sortable: true,
                filterable: true,
                dataIndex: 'tipo'
            },
            {
                text: 'Concept',
                sortable: true,
                filterable: true,
                dataIndex: 'concepto',                    
            }]

});

Ext.onReady(function() {
    Ext.QuickTips.init();


    grid.render('content');
    grid.show();
});

希望你们能帮助我！

Answer 1

将filters: [filtersCfg],替换为features: [filtersCfg],，并删除dataIndex: 'concepto',中可能导致IE崩溃的额外逗号。重要的是要注意ExtJS文件加载器似乎不适用于这个小提琴（类型错误）。

Answer 2

感谢@Wared的答案...原始代码中唯一要改变的是：

filters: [filtersCfg]

INTO features: [filtersCfg]现在代码如下：

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.ux.grid.FiltersFeature',
    'Ext.toolbar.Paging'
]);



var store = Ext.create('Ext.data.Store', {

   fields: [
           {name: 'tipo', type: 'string'},
           {name: 'concepto', type: 'string'},
           {name: 'ingreso', type: 'int'},
           {name: 'egreso', type: 'int'},
           {name: 'por_alicuota', type: 'float'},
           {name: 'fecha', type: 'string', dateFormat:'m/Y'}
       ] ,     

   data: [
{tipo:'Fijo',concepto:'Ingresos por Cuotas',ingreso:345000,egreso:0,por_alicuota:0,fecha:'11/2013'},
{tipo:'Extra',concepto:'Ingresos por Sanciones',ingreso:24500,egreso:0,por_alicuota:0,fecha:'11/2013'}

          ],

})

var filtersCfg = {
        ftype: 'filters',
        local: true,
        filters: [{
                type: 'string',
                dataIndex: 'tipo'
            }, {
                type: 'string',
                dataIndex: 'concepto'
            }]
    };

var grid =   Ext.create('Ext.grid.Panel', {
        renderTo: Ext.getElementById("leftPanel"),
        store: store,
        height: 300,
        features : [filtersCfg],
        title: "grid view",

        columns: [
             {
                text: 'Pay',
                sortable: true,
                filterable: true,
                dataIndex: 'tipo'
            },
            {
                text: 'Concept',
                sortable: true,
                filterable: true,
                dataIndex: 'concepto',                    
            }]

});

Ext.onReady(function() {
    Ext.QuickTips.init();


    grid.render('content');
    grid.show();
});

Extjs GridFilter功能不起作用

2 个答案: