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

를 사용하고, 당신은 "feature/filters.js로드 할 수 없습니다"때문에 404 오류를 입수했습니다해야합니다. ftype:'filters'은 필요한 자바 스크립트를 사용할 수 있도록 ExtJS 파일에 포함해야하는 정보를 제공하지 않기 때문입니다. 수동으로 적용하기 전에 파일을로드 할 수 ftype :

파일 src/ux/grid/FiltersFeature.js을로드는 ExtJS를 지시하거나 ftype없이 접근 방식을 취할 수

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

:

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