PDA

View Full Version : how to filter the data in NestedList using searchfield



NCN
28 May 2012, 8:16 PM
Can some one help me for the same ?

Thanks in advance !!!

NCN
29 May 2012, 3:12 AM
Please find find below my code:

view/Main.js


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



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


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 :-
35694

mitchellsimoens
30 May 2012, 8:51 AM
You may want to filter the sub stores that each list gets.

NCN
30 May 2012, 8:56 AM
"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 !!!

Sasha172
27 Sep 2012, 12:21 AM
Hi,

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

Ok lets assume the default documentation data :



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 :


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 :


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