Extjs Filterung funktioniert nicht richtig

Question

Ich bin neu zu ExtJS. Ich habe einen Code zum Anwenden der Filterung in einem Grid geschrieben, aber es funktioniert nicht richtig. Anfügen des Code-Snippets, das ich zum Anwenden der Filterung geschrieben habe. Ohne Filter wird das Raster ordnungsgemäß am Bedienfeld angezeigt.

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

I extjs-4.2.2

Answer 1

In-Browser-Konsole verwenden, sollten Sie einen 404 Fehler bekommen haben, denn "feature/filters.js konnte nicht geladen werden". Dies liegt daran, dass ftype:'filters' keine Informationen liefert, welche Datei ExtJS enthalten muss, um das benötigte Javascript verfügbar zu haben. Sie können die Datei manuell geladen werden vor der Anwendung ein ftype:

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

die ExtJS die Datei src/ux/grid/FiltersFeature.js laden erzählt, oder Sie können den Ansatz ohne ftype:

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