Question

需要帮助筛选具有多个值的网格。

我正在尝试创建具有许多电话价值的menucheckitem。并根据已检查的电话筛选网格。

通过使用以下代码，我能够根据单个值过滤网格。

store.filter([{
    property: 'type',
    value: value
}]);

现在，即使我选择了很多电话复选框，我也想过滤网格。我尝试使用store.filterBy（）。但是，工作不正常，我不知道自己在做什么错。

var test = [“ 111-222-333”，“ 111-222-334”，“ 111-222-335”]

store.filterBy(function(record, val){
      return test.indexOf(record.get('phone')) != -1 
    }
});

这仅过滤第一个值，即仅过滤“ 111-222-333”值。不过滤测试中的所有其他值。

在此处找到示例代码- https://fiddle.sencha.com/#view/editor&fiddle/2ll7

Answer 1

所以我分叉了你的小提琴，重新制作了它，我想我已经实现了你想要的。首先，您在menucheckitem中对bbar的定义有点奇怪。我认为您需要一个包含复选框的电话列表，但是该列表取决于商店记录，因此需要动态构建（就像我在afterrender中所做的那样）。实际上，这必须在商店的load事件内部，但在示例中并未触发（也许bcz这是商店的内存类型）。无论如何，当您复制代码时，都需要将所有afterrender内容放入商店load事件中。

FIDDLE

Ext.application({
name: 'Fiddle',

launch: function () {
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: {
            fields: ['name', 'email', 'phone', 'type'],
            data: [{
                name: 'Marge',
                email: 'marge@simpsons.com',
                phone: '111-222-334',
                type: 'Foo'
            }, {
                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: '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'
        }],
        listeners: {
            afterrender: function (grid) {
                var store = grid.store;
                var phones = store.getData().items.map(function (r) { //get the phones
                    return r.get('phone');
                });
                var phonesFiltered = [];
                phones.forEach(function (p) { //filter them to make records unique
                    if (!phonesFiltered.includes(p)) {
                        phonesFiltered.push(p);
                    }
                });
                var items = [];
                phonesFiltered.forEach(function (p) { //create `menucheckitem` items with phone names and attaching `checkchange` event
                    items.push({
                        xtype: 'menucheckitem',
                        text: p,
                        listeners: {
                            checkchange: function (checkbox, checked, eOpts) {
                                var menu = checkbox.up('menu');
                                var filterPhones = [];
                                menu.items.items.forEach(function (c) { //get all checked `menucheckitem`-s
                                    if (c.checked) {
                                        filterPhones.push(c.text);
                                    }
                                });
                                var store = checkbox.up('grid').store;
                                store.clearFilter();
                                if (filterPhones.length > 0) {
                                    store.filterBy(function (record) {
                                        return this.filterPhones.indexOf(record.get('phone')) !== -1;
                                    }, {
                                        filterPhones: filterPhones
                                    });
                                }
                            }
                        }
                    });
                });
                //
                Ext.getCmp('toolbarId').add({
                    xtype: 'menu',
                    // height: 120,
                    floating: false,
                    items: items
                });
            }
        },
        bbar: {
            xtype: 'toolbar',
            height: 200,
            id: 'toolbarId'
        },
        renderTo: Ext.getBody()
    });
}
});

ExtJS-在同一列中网格多值过滤器

1 个答案: