ExtJS

Question

我用 menuCheckItem 的两个菜单创建了一个网格和一个工具栏。当我检查 menuCheckItem 时，网格过滤器甚至具有多个值和多个列。这工作正常，因为我首先创建了网格，然后是工具栏

this.up('') // Used Instead of Ext.getCmp()

工作 FIDDLE - https://fiddle.sencha.com/#view/editor&fiddle/2lop

现在我正在尝试在顶部 1 上分别创建相同的工具栏和菜单，然后在下方创建网格。但是在这样做的同时，只有多个值在起作用。

我正在尝试过滤具有多个值和多个列的网格。

我尝试了一些东西 -

// Only Filters One Value at a time with each Columns
store.queryBy(function(record,id){
 return (record.get('name') == someValue && record.get('phone') == otherValue);
});

和

// Filters Many Columns with Single Value
filter.add(
     property : name, phone
     value : "somevalue"
     operator : "OR"

);

有什么方法可以实现 Toolbar 1st 然后 grid 吗？并同时过滤具有多个值和列的网格？

Answer 1

在这个FIDDLE中我重做了一个函数(checkchange)，它是通用的，可以单独放置，你可以将它附加到你创建的每个menucheckitem .唯一的问题是，如果您添加新的 menucheckitem 过滤器，您应该使用 columnDataIndex-Menu 的名称命名 menucheckitem id，并在 menuFilters 中添加此 columnDataIndex，仅此而已。

checkchange: function (checkbox, checked, eOpts) {
    var menuFilters = ['name', 'phone'];
    var getChecked = function (m) {
        var checkedItems = [];
        m.items.items.forEach(function (c) {
            if (c.checked) {
                checkedItems.push(c.text);
            }
        });
        return checkedItems;
    };
    //
    var menus = new Map();
    menuFilters.forEach(function (e) {
        menus.set(e, Ext.getCmp(e + '-Menu'));
    });
    //
    var fieldValues = [];
    menuFilters.forEach(function (e) {
        fieldValues.push([e, getChecked(menus.get(e))]);
    });
    //
    var store = checkbox.up('grid').store;
    store.clearFilter();
    //
    if (fieldValues.length > 0) {
        store.filterBy(function (record) {
            var fV = this.fieldValues;
            for (var i = 0; i < fV.length; i++) {
                if (fV[i][1].length > 0) {
                    if (fV[i][1].indexOf(record.get(fV[i][0])) === -1) {
                        return false;
                    }
                }
            }
            return true;
        }, {
            fieldValues: fieldValues
        });
    }
}

ExtJS - 具有多列和多个值的网格过滤器

ExtJS - Grid filter with multiple columns and multiple values

grid

filter

multiple-value

multiple-columns