filter拦截extjs ajax,javascript - How to filter ExtJs GridPanel/ExtJs Store? - Stack Overflow

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