Extjs 6 - 使用组合框过滤网格答案

【问题标题】：Extjs 6 - Filter grid with comboboxExtjs 6 - 使用组合框过滤网格
【发布时间】：2016-10-01 03:02:28
【问题描述】：

我想用一个组合框对我的网格进行排序，我希望当我在组合框中选择一个值时，网格的内容会发生变化，例如 type 有人可以帮助我吗？谢谢

这是我的代码的 sn-p：

Ext.create('Ext.grid.Panel', {
    height: 400,
    title: 'Simpsons',
    store: pagingStore,
    columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Email',
            dataIndex: 'email'
        }, {
            text: 'Phone',
            dataIndex: 'phone'
        },
        {
            text: 'Type',
            dataIndex: 'type'
        }],
    bbar: {
        xtype: 'pagingtoolbar',
        store: pagingStore,
        displayInfo: true,
        items: [
            '-', {
                xtype: 'combo',
                fieldLabel: 'List account',
                labelAlign: 'right',
                store: storeCombo,
                displayField: 'name'
            }]
    },
    renderTo: Ext.getBody()
});

【问题讨论】：

您希望您的网格在选择组合框时按类型列排序？
我想要这样的东西：> drive.google.com/open?id=0B4va_pdrT1cceHB3N2dySDBpTVE
客户账户选择后会发生什么。
选择客户账户时，网格仅显示所有客户账户。
酷，知道了。将尝试更新提琴手

标签： javascript extjs combobox

【解决方案1】：

你可能想要这样的东西：

Ext.create('Ext.grid.Panel', {
    height: 400,
    title: 'Simpsons',
    store: {
        fields: ['name', 'email', 'phone', 'type'],
        data: [{
            name: 'Homer',
            email: 'homer@simpsons.com',
            phone: '111-222-333',
            type: 'Foo'
        }, {
            name: 'Marge',
            email: 'marge@simpsons.com',
            phone: '111-222-334',
            type: 'Foo'
        }, {
            name: 'Bart',
            email: 'bart@simpsons.com',
            phone: '111-222-335',
            type: 'Bar'
        }, {
            name: 'Lisa',
            email: 'lisa@simpsons.com',
            phone: '111-222-336',
            type: 'Bar'
        }]
    },
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email'
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }, {
        text: 'Type',
        dataIndex: 'type'
    }],
    bbar: {
        xtype: 'toolbar',
        items: [
            '-', {
                xtype: 'combo',
                fieldLabel: 'List account',
                labelAlign: 'right',
                forceSelection: true,
                emptyText: '-- Select --',
                store: {
                    fields: ['type'],
                    data: [{
                        type: 'Foo'
                    }, {
                        type: 'Bar'
                    }]
                },
                displayField: 'type',
                valueField: 'type',
                listeners: {
                    change: function(combo, value) {
                        var grid = this.up('grid'),
                            store = grid.getStore();

                        if (!value) {
                            store.getFilters().removeAll();
                        } else {
                            store.filter([{
                                property: 'type',
                                value: value
                            }]);
                        }
                    }
                }
            }
        ]
    },
    renderTo: Ext.getBody()
});

https://fiddle.sencha.com/#fiddle/1hn4

【讨论】：