如何筛选ExtJs GridPanel/ExtJs Store

Question

我是ExtJs的新手。我有一个与data store绑定的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版本

Answer 1

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)
但是，检查您的应用程序，我认为可以进行以下改进：

• 根据存储数据动态创建过滤器复选框
• 将"全部"复选框与其余复选框同步(即，选择"全部"时，选择所有其他复选框)

这是经过改进的代码：

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链接，并运行代码(只需告诉我)。

干杯，来自玻利维亚拉巴斯