1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    57
    Vote Rating
    0
    NCN is on a distinguished road

      0  

    Default how to filter the data in NestedList using searchfield

    how to filter the data in NestedList using searchfield


    Can some one help me for the same ?

    Thanks in advance !!!

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    57
    Vote Rating
    0
    NCN is on a distinguished road

      0  

    Default


    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 :-
    sample.jpg

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,219
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You may want to filter the sub stores that each list gets.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    57
    Vote Rating
    0
    NCN is on a distinguished road

      0  

    Default


    "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 !!!

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    119
    Vote Rating
    4
    Sasha172 is on a distinguished road

      0  

    Default


    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

Thread Participants: 2