如何过滤ExtJs GridPanel / ExtJs商店？

Question

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

Answer 1

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 (ie 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