ExtJS - Сетка фильтра нескольких значений в одном столбце - PullRequest
Новая
       13

ExtJS - Сетка фильтра нескольких значений в одном столбце

0 голосов
/ 19 сентября 2018

Требуется помощь в фильтрации сетки с несколькими значениями.

Я пытаюсь создать пункт меню с несколькими значениями телефона.И отфильтровать сетку на основе отмеченного телефона.

Используя приведенный ниже код, я могу фильтровать сетку на основе одного значения. 

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

1 Ответ

0 голосов
/ 19 сентября 2018

Итак, я раздвоил твою скрипку, переделал ее и, думаю, достиг того, чего хотел ты.Во-первых, ваше определение 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()
    });
}
});
...