我是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链接运行代码(告诉我).
干杯,来自玻利维亚拉巴斯
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
