Javascript 如何过滤ExtJs GridPanel/ExtJs存储？

我是ExtJs新手。我有一个

GridPanel

，它与

数据存储绑定在一起。我有一个
checkboxgroup
，其中包含
GridPanel
行的可能值。我想用
checkboxgroup
值过滤
GridPanel

这是密码-

Store1 = new Ext.data.JsonStore({
url: 'CustomerProfiles/GetDetails',
root: 'rows',
fields:['Name','Id']
});

DetailedResults =
                {
                    xtype: 'grid',
                    autoHeight: true,
                    autoWidth: true,
                    autoScroll: true,
                    border: false,
                    trackMouseOver: false,
                    frame: true,
                    store: Store1,
                    columns: [
                        { header: 'Name', dataIndex: 'Name', width: 90 },
                        { header: 'Id', dataIndex: 'Id', width: 50 }
                    ]
                };

Leftpanel = new Ext.Panel({
id: 'Leftpanel',
frame: true,
width: 175,
items: [
        {
            xtype: 'label'
        },
        {
            xtype: 'checkboxgroup',
            columns: 1,
            vertical: true,
            items: [{
                boxLabel: 'ALL',
                name: 'chkName',
                inputValue: 'all'
            }, {
                boxLabel: 'N1',
                name: 'chkName',
                inputValue: 'N1'
            }, {
                boxLabel: 'N2',
                name: 'chkName',
                inputValue: 'N2'
            }, {
                boxLabel: 'N3',
                name: 'chkName',
                inputValue: 'N3'
            }], listeners: {
                change: {
                    fn: function () {
                        Store1.clearFilter();
                        var selectedValue = this.getValue();
                        for (var i = 0; i < selectedValue.length; i++) {
                            Store1.filter('Name', selectedValue[i].inputValue);
                        }
                    }
                }
            }             
        }            
]});

Store1=new Ext.data.JsonStore({
url:“CustomerProfiles/GetDetails”，
root:'行'，
字段：['Name'，'Id']
});
详细结果=
{
xtype:'网格'，
自动高度：正确，
自动宽度：正确，
autoScroll：是的，
边界：错，
trackMouseOver:false，
框架：对，
店面：店面1，
栏目：[
{标题：'Name'，数据索引：'Name'，宽度：90}，
{标题：'Id'，数据索引：'Id'，宽度：50}
]
};
Leftpanel=新的外部面板({
id:“Leftpanel”，
框架：对，
宽度：175，
项目：[
{
xtype:“标签”
},
{
xtype:“checkboxgroup”，
栏目：1，
是的，
项目：[{
boxLabel:'全部'，
名称：'chkName'，
inputValue:'全部'
}, {
盒子标签：“N1”，
名称：'chkName'，
输入值：“N1”
}, {
盒子标签：“N2”，
名称：'chkName'，
输入值：“N2”
}, {
盒子标签：“N3”，
名称：'chkName'，
inputValue:'N3'
}]，听众：{
更改：{
fn：函数（）{
Store1.clearFilter（）；
var selectedValue=this.getValue（）；
对于（变量i=0；i

我哪里出错了

PS：我使用的是3.4版本
的
getValue（）
方法有点棘手，它返回的对象根据结果集具有可变结构，这导致了代码中的问题。但是，
getChecked（）
方法更简单，我将在解决方案中使用它。
然后，我们使用filterBy，因为它在这种情况下更有用。

这里是解决方案（内联注释）：

可选（额外改进，仅适用于ExtJs 4.x）

但是，检查你的应用程序，我认为可以做以下改进：


根据存储数据动态创建筛选器复选框
将“全部”复选框与其余复选框同步（即，选择“全部”时，选择所有其他复选框）

以下是代码及其改进：

var Store1 = new Ext.data.JsonStore({
    proxy: {
        type: 'ajax',                
        url: 'CustomerProfiles/GetDetails',
        reader: {                    
            root: 'rows'                    
        }
    },            
    autoLoad: true,                        
    fields: ['Name','Id'],
    listeners: {
            //Each time the store is loaded, we create the checkboxes dynamically, and add the checking logic in each one
        load: function(store, records){
            createCheckboxesFromStore(store);                       
        }
    }
});

var DetailedResults = {
    xtype: 'grid',
    autoHeight: true,
    autoWidth: true,
    autoScroll: true,
    border: false,
    trackMouseOver: false,
    frame: true,
    store: Store1,
    columns: [
        { header: 'Name', dataIndex: 'Name', width: 90 },
        { header: 'Id', dataIndex: 'Id', width: 50 }
    ]
};

var Leftpanel = new Ext.Panel({
    id: 'Leftpanel',
    frame: true,
    width: 175,
    items: [
        {
            xtype: 'label'
        },
        {
            xtype: 'checkboxgroup',
            columns: 1,
            vertical: true,

        }            
]});

function createCheckboxesFromStore(store){
    var checkBoxGroup = Leftpanel.down('checkboxgroup');
    checkBoxGroup.removeAll();
    checkBoxGroup.add({
        itemId: 'allCheckbox',
        boxLabel: 'ALL',
        name: 'chkName',
        inputValue: 'all',
        checked: true,
        listeners: {
             change: function (chbx, newValue) {                                        
                 console.log("Changed ALL to ", newValue);
                 if(newValue){  //If ALL is selected, select every checkbox                                   
                     var allCheckboxes = this.up('checkboxgroup').query("checkbox"); //Array of all checkboxes
                     for (var i = 0; i < allCheckboxes.length; i++) {
                         allCheckboxes[i].setValue(true);                                         
                     }
                 }

             }   
        }
    });

    //Create one checkbox per store item
    store.each(function(record){
        checkBoxGroup.add({
            boxLabel: record.get('Id'),
            name: 'chkName',
            inputValue: record.get('Name'),
            checked: true,
            listeners: {
                change: function (chbx, newValue) {
                    console.log("Changed ", chbx.inputValue, " to ", newValue);
                    var checkboxGroup = this.up('checkboxgroup'),
                        checkedBoxes = checkboxGroup.getChecked(), //Array of checked checkboxes
                        selectedValues = []; //Array of selected values                                       

                    //If we uncheck one, also uncheck the ALL checkbox
                    if(!newValue) checkboxGroup.down("#allCheckbox").setValue(false);

                    for (var i = 0; i < checkedBoxes.length; i++) {
                        selectedValues.push(checkedBoxes[i].inputValue); //Add each inputValue to the array                                       
                    }                                                                        
                    Store1.filterBy(function(record){
                       //If all was selected or if the name is included in the selectedValues, include the item in the filter
                       return Ext.Array.contains(selectedValues, record.get('Name'));                                         
                    });
                }                                
            }
        });
    });
}

var Store1=new Ext.data.JsonStore({
代理：{
键入：“ajax”，
url:“CustomerProfiles/GetDetails”，
读者：{
根：“行”
}
},            
自动加载：对，
字段：['Name'，'Id']，
听众：{
//每次加载存储时，我们都会动态创建复选框，并在每个复选框中添加检查逻辑
加载：功能（存储、记录）{
createCheckboxesFromStore（商店）；
}
}
});
var DetailedResults={
xtype:'网格'，
自动高度：正确，
自动宽度：正确，
autoScroll：是的，
边界：错，
trackMouseOver:false，
框架：对，
店面：店面1，
栏目：[
{标题：'Name'，数据索引：'Name'，宽度：90}，
{标题：'Id'，数据索引：'Id'，宽度：50}
]
};
var Leftpanel=新的外部面板({
id:“Leftpanel”，
框架：对，
宽度：175，
项目：[
{
xtype:“标签”
},
{
xtype:“checkboxgroup”，
栏目：1，
是的，
}            
]});
函数createCheckboxesFromStore（存储）{
var checkBoxGroup=Leftpanel.down（'checkBoxGroup'）；
checkBoxGroup.removeAll（）；
checkBoxGroup.add({
itemId:'所有复选框'，
boxLabel:'全部'，
名称：'chkName'，
inputValue:'所有'，
核对：对，
听众：{
更改：函数（chbx，newValue）{
log（“全部更改为”，newValue）；
如果（newValue）{//如果选择了“全部”，请选中“每个”复选框
var allcheckbox=this.up（'checkboxgroup'）.query（“checkbox”）；//所有复选框的数组
对于（变量i=0；ichange: {
    fn: function () {
        var selectedValues = []; //Array of selected values 
        this.items.each(function(checkbox){
            if(checkbox.checked)
                selectedValues.push(checkbox.inputValue);
        });                                    
        var allSelected = selectedValues.indexOf('all') >= 0; //Whether the 'ALL' option was selected           
        Store1.filterBy(function(record){
           //If all was selected or if the name is included in the selectedValues, include the item in the filter
           return allSelected || selectedValues.indexOf(record.get('Name')) >= 0;                                         
        });
    }
}

var Store1 = new Ext.data.JsonStore({
    proxy: {
        type: 'ajax',                
        url: 'CustomerProfiles/GetDetails',
        reader: {                    
            root: 'rows'                    
        }
    },            
    autoLoad: true,                        
    fields: ['Name','Id'],
    listeners: {
            //Each time the store is loaded, we create the checkboxes dynamically, and add the checking logic in each one
        load: function(store, records){
            createCheckboxesFromStore(store);                       
        }
    }
});

var DetailedResults = {
    xtype: 'grid',
    autoHeight: true,
    autoWidth: true,
    autoScroll: true,
    border: false,
    trackMouseOver: false,
    frame: true,
    store: Store1,
    columns: [
        { header: 'Name', dataIndex: 'Name', width: 90 },
        { header: 'Id', dataIndex: 'Id', width: 50 }
    ]
};

var Leftpanel = new Ext.Panel({
    id: 'Leftpanel',
    frame: true,
    width: 175,
    items: [
        {
            xtype: 'label'
        },
        {
            xtype: 'checkboxgroup',
            columns: 1,
            vertical: true,

        }            
]});

function createCheckboxesFromStore(store){
    var checkBoxGroup = Leftpanel.down('checkboxgroup');
    checkBoxGroup.removeAll();
    checkBoxGroup.add({
        itemId: 'allCheckbox',
        boxLabel: 'ALL',
        name: 'chkName',
        inputValue: 'all',
        checked: true,
        listeners: {
             change: function (chbx, newValue) {                                        
                 console.log("Changed ALL to ", newValue);
                 if(newValue){  //If ALL is selected, select every checkbox                                   
                     var allCheckboxes = this.up('checkboxgroup').query("checkbox"); //Array of all checkboxes
                     for (var i = 0; i < allCheckboxes.length; i++) {
                         allCheckboxes[i].setValue(true);                                         
                     }
                 }

             }   
        }
    });

    //Create one checkbox per store item
    store.each(function(record){
        checkBoxGroup.add({
            boxLabel: record.get('Id'),
            name: 'chkName',
            inputValue: record.get('Name'),
            checked: true,
            listeners: {
                change: function (chbx, newValue) {
                    console.log("Changed ", chbx.inputValue, " to ", newValue);
                    var checkboxGroup = this.up('checkboxgroup'),
                        checkedBoxes = checkboxGroup.getChecked(), //Array of checked checkboxes
                        selectedValues = []; //Array of selected values                                       

                    //If we uncheck one, also uncheck the ALL checkbox
                    if(!newValue) checkboxGroup.down("#allCheckbox").setValue(false);

                    for (var i = 0; i < checkedBoxes.length; i++) {
                        selectedValues.push(checkedBoxes[i].inputValue); //Add each inputValue to the array                                       
                    }                                                                        
                    Store1.filterBy(function(record){
                       //If all was selected or if the name is included in the selectedValues, include the item in the filter
                       return Ext.Array.contains(selectedValues, record.get('Name'));                                         
                    });
                }                                
            }
        });
    });
}