Question

我发现这篇文章How to add filters in grid column headers in extjs?但是，我不知道如何在我的代码中应用它，它使用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。

Answer 1

您可以在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

中有一个不错的非mvc示例

如何在ExtJS MVC中将FiltersFeature应用于网格

1 个答案: