how to filter the data in NestedList using searchfield

Can some one help me for the same ?

Thanks in advance !!!

Please find find below my code:

view/Main.js

Code:

---

    config: {
                width: '40%',
                height: '100%',
                    left :true,
                modal: true,l
                hideOnMaskTap: false,                           
                            items: [  {
                                        xtype: 'listCollection',
                                                                                                       
                                                      items:[ {
                                                            xtype: 'toolbar',
                                                            docked: 'top',
                                                            maxHeight :'100%',
                                       
                                                      items: [
                                                                {
                                                                    xtype: 'searchfield',
                                                                    width:'60%',
                                                                    height:'100%',
                                                                                                                                                   
                                                                },
                                                                {
                                                                                    xtype: 'title',
                                                                                    title : 'Select ',
                                                                            }
                                                            ]
                                                                                      }]
                                                      }
                                              ]           
                                                    }

---

view/listCollection.js

Code:

---

Ext.define('Test.view.ListCollection', {
    extend: 'Ext.NestedList',
    xtype: 'listCollection',
    requires: ['Test.store.DataStore_sub1'],
   
    config: {
        displayField: 'firstName',
        itemTpl: '{firstName}',
        store: 'DataStore_sub1',
        onItemDisclosure: true
    }
});

---

controller.js

Code:

---

      config: {
                //stores: ['DataStore_sub1'],
                refs: {
            },


            control: {
                    'searchfield': {
                            placeHolder: 'search..',
                            keyup: 'onSearchKeyUp'
                    }
            }
                       
        }, onSearchKeyUp:function(field) {
                                          //get the store and the value of the field
                                                  var value = field.getValue(),                                       
                                          store = Ext.getStore('DataStore_sub1');
......
.....
...}

---

please find below the image :-
Attachment 35694

You may want to filter the sub stores that each list gets.

"You may want to filter the sub stores that each list gets."

yes, want to filter root data and as well sub store data as well through searchfield.

can you help for the same.

Thanks in Advance !!!

Hi,

Hahahaha…. I finally found it !! I created a workaround to filter the nested list :)

Ok lets assume the default documentation data :

Code:

---


var data ={    name:'Don Griffin',    title:'Senior Technomage',    company:'Sencha Inc.',    drinks:['Coffee','Water','More Coffee'],    kids:[{ name:'Aubrey',  age:17},{ name:'Joshua',  age:13},{ name:'Cale',    age:10},{ name:'Nikol',  age:5},{ name:'Solomon', age:0}]};

---

Your model should have the following fields :

Code:

---

fields : [

{name : 'name', type : 'string'},
{name : 'title', type : 'string'},
{name : 'company', type : 'string'},
{name : 'drinks', type : 'auto'},
{name : 'kids', type : 'auto'},      //This is the important one
{name : 'age', type : 'integer'},

]

---

Now, if you want to filter your nestedList and only show the parents who (say) have a kid named "Cale" you do the following :

1. Don't make a nested list component. Make only a list component and feed it the nested data above.
2. Use the filterBy function as below :

Code:

---

MyApp.stores.ListStore.filterBy(function(record,id){

var theseKids = record.data.kids;  //This takes the kids array using the "auto" type from the data and     
                                                      //feeds it into our variable.
var flag = false;
for(var i=0; i<theseKids.length; i++){

if(theseKids[i].name.indexOf('Cade') != 0)

flag = true;

}
return flag;

});

---

Now to the user it still looks like a nested list is being filtered :)
If you need the data to look like a nested list all you need to do is use the NavigationView component to pull the data from the itemTap event and push a new view of a list with that array of data.

Cheers
Hope this helps somebody :)

Sasha