1

我通过这个演示实现了 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
                            }
4

0 回答 0