犯規出現

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