Saturday, May 11, 2024
 Popular · Latest · Hot · Upcoming
118
rated 0 times [  119] [ 1]  / answers: 1 / hits: 5064  / 11 Years ago, fri, december 27, 2013, 12:00:00

I'm new to ExtJs. I have a GridPanel which is binded with a data store. I have a checkboxgroup, which containts the possible values of the GridPanel row. I want to filter the GridPanel with the checkboxgroup values.



Here is the code -



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);
}
}
}
}
}
]});


Where I went wrong?



PS: I am using 3.4 version


More From » extjs

 Answers
2

The getValue() method is a little tricky, the object it returns has variable structure depending on the resultset, that caused the problem in your code. However, the getChecked() method is more straightforward, I'll use it in the solution.
Then, we use filterBy as it's more useful in this case.

Here you have the solution (comments inline):



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'));
});
}
}


Problem solved. Tested and working :)



UPDATE
The above code works on ExtJs >= 4. For Ext 3.4, this is the code:



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;
});
}
}


OPTIONAL (extra improvements, works only on ExtJs 4.x)

However, checking your app, I think the following improvements could be done:




  • Create the filter checkboxes dynamically depending on the store data

  • Sync the ALL checkbox with the rest (i.e. when selecting ALL, select all the other checkboxes)



This is the code with the improvements:



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'));
});
}
}
});
});
}


This is also tested and working :). If you need it, I can pass you a jsfiddle link with the code running (just tell me).



Cheers, from La Paz, Bolivia


[#49202] Wednesday, December 25, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
breonnamayah

Total Points: 574
Total Questions: 115
Total Answers: 96

Location: England
Member since Sun, May 21, 2023
1 Year ago
;