如何使用sencha touch 2在手风琴列表上进行文本实时搜索

时间:2013-08-09 12:03:54

标签: javascript extjs sencha-touch sencha-touch-2 accordion

我通过此演示实现了AccordionList 1)https://github.com/kawanoshinobu/Ext.ux.AccordionList 2)http://docs.kawanoshinobu.com/accordionlist/。它工作得非常好。根据要求,需要在手风琴列表上实时搜索文本。 我只需要在不在子节点中的手风琴列表标题中搜索文本。搜索之后,如果手风琴标题符号应该能够展开并折叠这些标题。我已尝试使用此链接http://docs.sencha.com/touch/2.2.1/#!/example/search-list。它的工作非常适合列表,但对于AccordionList,我试过不正常工作,它表现不同。它是从显示可用标头的标头中搜索,但我无法扩展标头,因为这些标头下没有子节点。最初,对于那些在搜索文本后具有子节点的头部,没有子节点仅显示头部。任何人都可以告诉我如何在手风琴清单中实现这个吗?非常感谢。谢谢。

代码就在这里:

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

将此商店值分配给手风琴列表代码

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
                            }

0 个答案:

没有答案