犯规出现

Question

ExtJS的电网滤波器我在我看来，有一个ExtJS网格，现在我也想补充一些列过滤器... 我已经搜查了网络，但我没有成功。 问题是，如果我打开列的子菜单，我可以排序等我没有看到选项筛选器。

下面的代码是我的看法脚本的一部分：

Ext.define('Project.my.name.space.EventList', { 
    extend: 'Ext.form.Panel', 
    require: 'Ext.ux.grid.FiltersFeature', 

    bodyPadding: 10, 
    title: Lang.Main.EventsAndRegistration, 
    layout: { 
     align: 'stretch', 
     type: 'vbox' 
    }, 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, { 
      items: [ 

       ... 

       { 
       xtype: 'gridpanel', 
       title: '', 
       store: { proxy: { type: 'direct' } }, 
       flex: 1, 
       features: [filtersCfg], 
       columns: [ 
       { 
        xtype: 'gridcolumn', 
        dataIndex: 'Title', 
        text: Lang.Main.CourseTitle, 
        flex: 1, 
        filterable: true 
       }, 
       { 
        xtype: 'datecolumn', 
        dataIndex: 'StartDate', 
        text: Lang.Main.StartDate, 
        format: Lang.Main.DateFormatJS, 
        flex: 1, 
        filter: { type: 'date' } 
       }, 
       { 
        xtype: 'datecolumn', 
        dataIndex: 'EndDate', 
        text: Lang.Main.EndDate, 
        format: Lang.Main.DateFormatJS, 
        flex: 1, // TODO: filter 
       }, 
       { 
        xtype: 'gridcolumn', 
        dataIndex: 'Participants', 
        text: Lang.Main.Participants, 
        flex: 1 
       }, 
       { 
        xtype: 'gridcolumn', 
        dataIndex: 'LocationName', 
        text: Lang.Main.Location, 
        flex: 1 
       }, 
       { 
        xtype: 'gridcolumn', 
        dataIndex: 'Status', 
        text: Lang.Main.Status, 
        flex: 1, // TODO: filter 
       }], 
       dockedItems: [{ 
        xtype: 'toolbar', 
        items: [{ 
         icon: 'Design/icons/user_add.png', 
         text: Lang.Main.RegisterForEvent, 
         disabled: true 
        }, 
        { 
         icon: 'Design/icons/user_delete.png', 
         text: Lang.Main.Unregister, 
         disabled: true 
        }, 
        { 
         icon: 'Design/icons/application_view_list.png', 
         text: Lang.Main.Show, 
         disabled: true 
        }, 
        { 
         icon: 'Design/icons/calendar_edit.png', 
         text: Lang.Main.EditButtonText, 
         hidden: true, 
         disabled: true 
        }, 
        { 
         icon: 'Design/icons/calendar_add.png', 
         text: Lang.Main.PlanCourse, 
         hidden: true 
        }] 
       }] 
       } 
      ] 
     }); 

     me.callParent(arguments); 

     ... 

     this.grid = this.query('gridpanel')[0]; 

     this.grid.on('selectionchange', function (view, records) { 
      var selection = me.grid.getSelectionModel().getSelection(); 
      var event = (selection.length == 1) ? selection[0] : null; 
      var registered = event != null && event.data.Registered; 
      me.registerButton.setDisabled(registered); 
      me.unregisterButton.setDisabled(!registered); 
      me.showButton.setDisabled(!records.length); 
      me.editButton.setDisabled(!records.length);    

     }); 
    } 
}); 

这里也是代码的引擎收录链接：http://pastebin.com/USivWX9S

UPDATE

只注意到在调试时，我获得在FiltersFeature.js文件中的JS错误在这行：

createFilters: function() { 
     var me = this, 
      hadFilters = me.filters.getCount(), 
      grid = me.getGridPanel(), 
      filters = me.createFiltersCollection(), 
      model = grid.store.model, 
      fields = model.prototype.fields, 
Uncaught TypeError: Cannot read property 'prototype' of undefined 
      field, 
      filter, 
      state; 

请帮帮我！

Answer 1

有几个语法错误。

• FiltersFeature是一个网格功能，而不是一个组件。
• 您不能extend对象文本（纠正我，如果我错了）

使用过滤器是这样的：

var filtersCfg = { 
    ftype: 'filters', 
    local: true, 
    filters: [{ 
     type: 'numeric', 
     dataIndex: 'id' 
    }] 
}; 

var grid = Ext.create('Ext.grid.Panel', { 
    features: [filtersCfg] 
});