Question

I have a grouped Checkbox, and it has 4 checkboxes in it.

When the user selects a checkbox I need to filter a data store based on the value of the text box. When i select 2 textboxes, I get the output of ["Albert","Francis"], and when I select only the 1st textbox I get ["Albert"] and so forth.

Now, i need to know how to filter this ?

onCheckBoxGroupChange : function (field,newValue,oldValue,options) {
var chkv=newValue.chb;
console.log (chkv);
var st= Ext.getStore('People'); 
        st.on('load', function() {
           st.filter({
               filterFn: function(rec) {                   
                   return rec.get('name') == chkv; 

The problem I am having is, when I select both the CheckBoxes, chkv becomes ["Albert","Francis"] (Like an array), therefore I am unable to return the value since rec.get('name') == chkv; doesn’t look for an array.

Can someone help me?

Answer 1

what about:

filterFn: function(rec) {
    return Ext.Array.contains(chkv, rec.get('name'));
}

I want to make sure you know that you do not have to reload the store if you want to filter it. It looks like that is what you are doing in the snippet you provided above.

There are other problems actually, what your onCheckBoxGroupChange handler will actually do (if you leave it the way you have it above), is the following:

Every time a user clicks a checkbox it will first reload the store from the server, and then add the selected filter to the store’s filters and then filter the store by the filters it has saved.

E.g.:

User clicks “Albert” checkbox

Store reloads 
Store adds `["Albert"]` filter function 
Store performs filtering with `["Albert"]` filter function

User clicks “Francis” checkbox

Store reloads
Store adds `["Albert", "Francis"]` filter function
Store performs filtering with `["Albert"]` filter function
Store performs filtering with `["Albert", "Francis"]` filter function

User unclicks “Albert” checkbox

Store reloads
Store adds `["Francis"]` filter function
Store performs filtering with `["Albert"]` filter function
Store performs filtering with `["Albert", "Francis"]` filter function
Store performs filtering with `["Francis"]` filter function

You would just progressively get more and more filters. Plus unnecessarily reloading the store many times. I don’t think that is what you are going for.

You should review the docs on datastore filtering for more data on how to go about this.

Also, in your question you said that you had this problem when you selected two checkboxes because it returned an array. According to the text of your question you are also getting an array when you select one checkbox (["Albert"]). It only has one item in it but it is an array.

That is why my solution (which requires your chkv variable to be an array) would work.