Results 1 to 5 of 5

Thread: how to filter the data in NestedList using searchfield

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    57
    Vote Rating
    1
      0  

    Default 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
    1
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    You may want to filter the sub stores that each list gets.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    57
    Vote Rating
    1
      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
    120
    Vote Rating
    4
      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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •