如何在ExtJS MVC中應用濾鏡特性到網格MVC

我發現此帖子How to add filters in grid column headers in extjs?但是，我不知道如何將它應用於我的代碼中，該代碼使用了MVC模式。例如，這是我的網格：如何在ExtJS MVC中應用濾鏡特性到網格MVC

Ext.define('RateManagement.view.Grids.AirShipmentGrid', { 
    extend: 'Ext.grid.Panel', 
    xtype: 'AirShipmentGrid', 
    plugins: [ 
     { 
      clicksToMoveEditor: 1, 
      autoCancel: false, 
      ptype: 'rowediting', 
      pluginId: 'rowediting' 
     }, 
     'bufferedrenderer' 
    ], 
    loadMask: true, 
    columns: [ 
     {text: 'Home Country', dataIndex: 'homeCountry', width: 175, sortable: true}, 
     {text: 'Home Location', dataIndex: 'homeLocation', width: 175}, 
     {text: 'Host Country', dataIndex: 'hostCountry', width: 175}, 
     {text: 'Host Location', dataIndex: 'hostLocation', width: 175}, 
     {text: 'Assignee Air Shipment & Insurance', dataIndex: 'assigneeAirShipmentPlusInsurance', width: 200, xtype: 'numbercolumn', 
      editor: { xtype: 'numberfield', allowBlank: false, minValue: 0, blankText: 'Rate is required.', invalidText: 'Rate must be positive.' }}, 
     {text: 'Dependent Air Shipment & Insurance', dataIndex: 'dependentAirShipmentPlusInsurance', width: 200, xtype: 'numbercolumn', 
      editor: { xtype: 'numberfield', allowBlank: false, minValue: 0, blankText: 'Rate is required.', invalidText: 'Rate must be positive.' }}, 
     {text: 'Small Container & Insurance', dataIndex: 'smallContainerPlusInsurance', width: 175, xtype: 'numbercolumn', 
      editor: { xtype: 'numberfield', allowBlank: false, minValue: 0, blankText: 'Rate is required.', invalidText: 'Rate must be positive.' }}, 
     {text: 'Large Container & Insurance', dataIndex: 'largeContainerPlusInsurance', width: 175, xtype: 'numbercolumn', 
      editor: { xtype: 'numberfield', allowBlank: false, minValue: 0, blankText: 'Rate is required.', invalidText: 'Rate must be positive.' }}, 
     {text: 'Rate Currency', dataIndex: 'currencyId', xtype: 'currency-column' } 
    ] 
});

我在哪裏放這部分？

filters = { 
     ftype: 'filters', 
     encode: false, 
     local: true 
    };

我試着添加一個initComponent: function() {但它給了我一個錯誤。

注：我正在使用ExtJS 4.2.1版。

來源

2014-02-27 user1477388

您可以grid定義內聲明的過濾器功能：

Ext.define('RateManagement.view.Grids.AirShipmentGrid', { 
    extend: 'Ext.grid.Panel', 
    xtype: 'AirShipmentGrid', 
    requires:['Ext.ux.grid.FiltersFeature'], 
    plugins: [ 
     { 
      clicksToMoveEditor: 1, 
      autoCancel: false, 
      ptype: 'rowediting', 
      pluginId: 'rowediting' 
     }, 
     'bufferedrenderer' 
    ], 
    features: [{ 
     ftype: 'filters', 
     encode: false, 
     local: true, 
     filters: [{ 
      type: 'filterType', 
      dataIndex:'fieldToFilter' 
     }] 
    }], 
    loadMask: true, 
    columns: [ 
     {text: 'Home Country', dataIndex: 'homeCountry', width: 175, sortable: true}, 
     {text: 'Home Location', dataIndex: 'homeLocation', width: 175}, 
     {text: 'Host Country', dataIndex: 'hostCountry', width: 175}, 
     {text: 'Host Location', dataIndex: 'hostLocation', width: 175}, 
     {text: 'Assignee Air Shipment & Insurance', dataIndex: 'assigneeAirShipmentPlusInsurance', width: 200, xtype: 'numbercolumn', 
      editor: { xtype: 'numberfield', allowBlank: false, minValue: 0, blankText: 'Rate is required.', invalidText: 'Rate must be positive.' }}, 
     {text: 'Dependent Air Shipment & Insurance', dataIndex: 'dependentAirShipmentPlusInsurance', width: 200, xtype: 'numbercolumn', 
      editor: { xtype: 'numberfield', allowBlank: false, minValue: 0, blankText: 'Rate is required.', invalidText: 'Rate must be positive.' }}, 
     {text: 'Small Container & Insurance', dataIndex: 'smallContainerPlusInsurance', width: 175, xtype: 'numbercolumn', 
      editor: { xtype: 'numberfield', allowBlank: false, minValue: 0, blankText: 'Rate is required.', invalidText: 'Rate must be positive.' }}, 
     {text: 'Large Container & Insurance', dataIndex: 'largeContainerPlusInsurance', width: 175, xtype: 'numbercolumn', 
      editor: { xtype: 'numberfield', allowBlank: false, minValue: 0, blankText: 'Rate is required.', invalidText: 'Rate must be positive.' }}, 
     {text: 'Rate Currency', dataIndex: 'currencyId', xtype: 'currency-column' } 
    ] 
});

有一個在docs

來源

2014-02-27 22:12:37 weeksdev

感謝一個體面的非MVC例子這麼多。你知道過濾器 - >類型選項在哪裏列出嗎？我有一些小數類型，我想過濾，而不僅僅是字符串。 – user1477388

@ user1477388它們列在[docs]的**左手邊的樹**中（http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.ux.grid.filter.BooleanFilter ） – weeksdev

嘿，謝謝。 – user1477388

如何在ExtJS MVC中應用濾鏡特性到網格MVC

回答

相關問題