我是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); } } } } } ]});
哪里出错了？
PS：我使用的是3.4版本
解决方法:
getValue()方法有点棘手,它返回的对象具有可变结构,具体取决于结果集,这会导致代码中出现问题.但是,getChecked()方法更简单,我将在解决方案中使用它.
然后,我们使用filterBy,因为它在这种情况下更有用.
在这里你有解决方案(评论内联)：
change: { fn: function () { var checkedBoxes = this.getChecked(), //Array of checked checkboxes selectedValues = []; //Array of selected values for (var i = 0; i < checkedBoxes.length; i ) { selectedValues.push(checkedBoxes[i].inputValue); //Add each inputValue to the array } var allSelected = Ext.Array.contains(selectedValues, "all"); //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 || Ext.Array.contains(selectedValues, record.get("Name")); }); }}
问题解决了.经过测试和工作:)
UPDATE
上面的代码适用于ExtJs> = 4.对于Ext 3.4,这是代码：
change: { 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; }); }}
可选(额外改进,仅适用于ExtJs 4.x)
但是,检查您的应用程序,我认为可以进行以下改进：
>根据商店数据动态创建过滤器复选框
>将ALL复选框与其余复选框同步(即选择ALL时,选中所有其他复选框)
这是具有改进的代码：
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")); }); } } }); });}
这也是测试和工作:).如果你需要它,我可以通过jsfiddle链接运行代码(告诉我).
干杯,来自玻利维亚拉巴斯
来源：/content-1-337301.html
