Фильтрация Extjs не работает должным образом

Question

Я новичок в ExtJS. Я написал код для применения фильтрации в гриде, но он работает неправильно. Прикрепление фрагмента кода, который я написал для фильтрации. Без фильтров сетка правильно отображается на панели.

 Ext.create('Ext.data.Store', { 
     storeId: 'userDetailsStore', 
     fields: ['username', 'firstname', 'lastname', 'role', 'activeuser'], 
     data: {'items': [ 
       {"username": 'USER1', "USER1-firstname": "firstname", "lastname": "USER1-lastname", 
        "role": 'Admin', "activeuser": 'Y'}, 
       {"username": 'USER2', "firstname": "USER2-firstname", "lastname": "USER2-lastname", 
        "role": 'Type1', "activeuser": 'Y'}, 
       {"username": 'USER3', "firstname": "USER3-firstname", "lastname": "USER3-lastname", 
        "role": 'Type2', "activeuser": 'Y'}, 
       {"username": 'USER4', "firstname": "USER4-firstname", "lastname": "USER4-lastname", 
        "role": 'Type3', "activeuser": 'Y'}, 
       {"username": 'USER5', "firstname": "USER5-firstname", "lastname": "USER5-lastname", 
        "role": 'Admin', "activeuser": 'Y'}, 
       {"username": 'USER6', "firstname": "USER6-firstname", "lastname": "USER6-lastname", 
        "role": 'Type4', "activeuser": 'Y'} 
      ]}, 
     proxy: { 
      type: 'memory', 
      reader: { 
       type: 'json', 
       root: 'items' 
      } 
     } 
    }); 

    var filters = Ext.create('Ext.ux.grid.FiltersFeature', 
      { 
     // ftype: 'filters', 
     encode: false, 
     autoReload: false, 
     local: true, 
     filters: [{ 
       type: 'string', 
       dataIndex: 'username' 
      }, { 
       type: 'string', 
       dataIndex: 'firstname', 
       disabled: true 
      }, { 
       type: 'string', 
       dataIndex: 'lastname' 
      }, { 
       type: 'list', 
       dataIndex: 'role', 
       options: ['Admin', 'Type1', 'Type2', 'Type3', 'Type4'], 
       phpMode: true 
      }, { 
       type: 'string', 
       dataIndex: 'activeuser' 
      }] 
    }; 

    var user_view_grid = new Ext.create('Ext.grid.Panel', { 
     title: 'User Details', 
     border: false, 
     align: 'stretch', 
     store: Ext.data.StoreManager.lookup('userDetailsStore'), 
     loadMask: true, 
     features: [filters], 
     bbar: Ext.create('Ext.toolbar.Paging', { 
      store: Ext.data.StoreManager.lookup('userDetailsStore') 
     }), 
     columns: [ 
      {header: 'Username', dataIndex: 'username', flex: 1}, 
      {header: 'FirstName', dataIndex: 'firstname', flex: 1}, 
      {header: 'LastName', dataIndex: 'lastname', flex: 1}, 
      {header: 'Role', dataIndex: 'role', flex: 1}, 
      {header: 'ActiveUser', dataIndex: 'activeuser', align: 'center'} 
     ], 
     height: 200 
    }); 

    var user_view_panel = new Ext.Panel({ 
     region: 'north', 
     margins: '2 0 0 0', 
     cmargins: '5 5 0 0', 
     height: 200, 
     split: true, 
     collapsible: false, 
     border: true, 
     xtype: 'panel', 
     bodyStyle: 
       { 
        "background-color": "#F8F8F8", 
        "padding-left": "5px", 
        "padding-right": "5px", 
        "padding-bottom": "5px" 
       }, 
     items: [ 
      user_view_grid 
     ] 
    }); 

    Ext.create('Ext.container.Viewport', { 
     layout: 'fit', 
     items: [{ 
       layout: 'border', 
       defaults: { 
        collapsible: false, 
        split: false, 
        bodyStyle: 'padding:2px' 
       }, 
       items: [ 
        { 
         collapsible: false, 
         region: 'center', 
         title: 'User Management', 
         bodyStyle: {"background-color": "#F8F8F8"}, 
         layout: { 
          type: 'border', 
          align: 'stretch' 
         }, 
         items: [ 
          user_view_panel 
         ] 
        } 
       ] 
      }], 
     renderTo: Ext.getBody() 
    }); 

Я использую ExtJS-4.2.2

Answer 1

В консоли браузера, вы должны были получить 404 ошибку, потому что "feature/filters.js не может быть загружен". Это связано с тем, что ftype:'filters' не предоставляет информацию, которую должен включать файл ExtJS, чтобы иметь доступный javascript. Вы можете загрузить файл вручную перед нанесением ftype:

Ext.require('Ext.ux.grid.FiltersFeature'); 

, который говорит ExtJS, чтобы загрузить файл src/ux/grid/FiltersFeature.js, или вы можете принять подход без ftype:

var filters = Ext.create('Ext.ux.grid.FiltersFeature',{ 
    encode: false, 
    ...