PDA

View Full Version : How to do text live search on AccordionList using sencha touch2?



Rameshlamani
9 Aug 2013, 4:06 AM
Hi, I have implemented AccordionList by this demo 1) https://github.com/kawanoshinobu/Ext.ux.AccordionList 2) http://docs.kawanoshinobu.com/accordionlist/ . It is working very nicely. as per requirement need to live search text on accordion list. I need to search text only in accordion list headers not in child nodes. After search, Once if got accordion headers should be able expand and collapse those headers. I have tried by using this link http://docs.sencha.com/touch/2.2.1/#!/example/search-list. its working very nicely for list but for AccordionList i have tried not working proper it behaves different. it is searching from headers showing available headers, but i am not able to expand headers because there is no child nodes under those headers. Originally for those headers have child nodes after searching text no child nodes only showing headers. Can any body tell me how to achieve this one in accordion list? great appreciate. Thank you.


Code is Here:



if(searchfield !== ""){
store.filter([{
property: "text",
value: searchfield,
anyMatch: true
//exactMatch:true
}]);
}
else{
store.clearFilter();
}


assigning this store value to accordion list code is below



var accordionlistContent = {
xtype: 'accordionlist',
//store: Ext.create('eGMonitorApp.store.TestsStore'),
store: store,
name: 'accordionList',
height: 500,
headerItemTpl: [
'<tpl if="this.isExpanded(values)">',
'<div class="testsstatus{status}"></div></div>',
'<div style="width:80%;margin-left: 10px" <tpl if="values.year">style="font-style:italic; "</tpl>>',
'{text}</div>',
'<div class="down"></div>',
'<tpl else>',
'<div class="testsstatus{status}"></div></div>',
'<div style="width:80%;margin-left: 10px"<tpl if="values.year">style="font-style:italic;"</tpl>>',
'{text}</div>',
'<div class="right"></div>',
'</tpl>'
].join(''),
contentItemTpl: [
'<div class="testsstatus{status}"></div></div>',
'<div style="margin-left: 10px" >{text}<div>'
].join(''),
useSelectedHighlights: false,
indent: true
}

mitchellsimoens
11 Aug 2013, 3:37 PM
If there aren't any nodes in the DOM to search then you will have to iterate through the store to search.

Rameshlamani
11 Aug 2013, 8:59 PM
@mitchellsimoens (http://www.sencha.com/forum/member.php?22216-mitchellsimoens) Thank you for your reply. I have achieved but, facing one more issue. please can you visit link? provide me solution. I need to achieve please help me in this. Thank you. http://www.sencha.com/forum/showthread.php?269726-Why-Expand-and-collapse-is-not-working-After-text-search-in-Accordion-List