我是ExtJs的新手.我有一个GridPanel
绑定的data store
.我有一个checkboxgroup
,它包含GridPanel
行的可能值.我想GridPanel
用checkboxgroup
值过滤.
这是代码 -
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')); }); } }
问题解决了.经过测试和工作:)
更新 上面的代码适用于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链接运行代码(告诉我).
干杯,来自玻利维亚拉巴斯