ExtJS Grid Filter가 나타나지 않습니다.

Question

ExtJS Grid가 있습니다. 이제는 열 필터를 추가하고 싶습니다 ... 나는 성공하지 못했지만 이미 웹에서 검색했습니다. 문제는 내가 정렬 등등의 하위 메뉴를 열면 필터 옵션이 표시되지 않습니다.

여기

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