Extjs 6 -过滤器网格与组合框

Extjs 6 - Filter grid with combobox

本文关键字：组合网格过滤器 Extjs 更新时间：2023-09-26

我想用组合框对网格进行排序，我想当我选择组合框上的值时，网格的内容会改变，例如type，有人能帮助我吗?由于

这是我的代码片段:

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

您可能想要这样的内容:

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/小提琴/1 hn4