【问题标题】:After store filter expand and collapse is not showing child data in AccordionList?商店过滤器展开和折叠后 AccordionList 中不显示子数据?
【发布时间】:2013-08-13 10:54:01
【问题描述】:

我通过引用此链接实现了手风琴列表。 http://docs.kawanoshinobu.com/touch/#!/api/Ext.ux.AccordionList 。手风琴工作正常,没有任何问题。我只需要在手风琴列表标题上搜索文本。搜索后,如果得到手风琴标题,则一旦。应该是,我能够展开和折叠那些标题需要查看标题子项。我已经应用了商店过滤器,它是过滤商店并显示过滤后的数据(参考图片)。标题右侧发生展开和折叠,向下图标正在更改。但无法在展开模式下看到特定标头的子节点数据。子节点可用于该标头(在 console.log() 中看到)。 还有其他方法可以为手风琴列表/树商店应用过滤器吗?非常感谢。谢谢。 在上面的链接本身中,我已经应用了商店过滤器,它的行为与我在代码中面临的问题相同。在下面的代码中,我将过滤文本“to”传递给。今天过滤了,很不错。 但是当点击展开子节点时不可见。

代码在这里:

var data = {
    "items" : [{
          "text" : "Today",
          "items" : [{
                      "text" : "Eat",
                      "leaf" : true
                  }, {
                      "text" : "Sleep",
                      "leaf" : true
                  }, {
                      "text" : "Drinking",
                      "leaf" : true
                  }]
      }, {
          "text" : "Tomorrow",
          "items" : [{
                      "text" : "Watch TV",
                      "leaf" : true
                  }, {
                      "text" : "Watch Video",
                      "leaf" : true
                  }]
      }, {
          "text" : "This week",
          "items" : [{
                      "text" : "Shopping",
                      "leaf" : true
                  }]
      }, {
          "text" : "Later",
          "items" : [{
                      "text" : "Eat",
                      "leaf" : true
                  }, {
                      "text" : "Sleep",
                      "leaf" : true
                  }, {
                      "text" : "Drinking",
                      "leaf" : true
                  }]
      }]
 };

 Ext.define('Task', {
     extend: 'Ext.data.Model',
     config: {
         fields: [{
             name: 'text',
             type: 'string'
         }]
     }
 });

 var store = Ext.create('Ext.data.TreeStore', {
     model: 'Task',
     defaultRootProperty: 'items',
     root: data
 });    


store.filter([{
                    property: "text",
                    value: "to",
                    anyMatch: true               
                }]);


 var accordionList = Ext.create('Ext.ux.AccordionList', {
     fullscreen: true,
     store: store
 });

【问题讨论】:

    标签: filter sencha-touch sencha-touch-2 accordion sencha-touch-2.1


    【解决方案1】:

    我做到了。 store.filter 函数,很好地过滤文本,但如果它有子节点也不会显示。因为我们在商店中搜索了一些特定的文本。过滤器后仅显示那些过滤器文本。我走了另一条路。根据我的要求,它工作得很好。我正在调用网络服务 store.load()。 在商店中搜索输入的文本。如果输入的文本在父级别不可用,则从存储中删除该特定项目。经过迭代,最终存储分配给手风琴列表。手风琴列表显示相关的搜索文本数据。干杯:)。下面是代码。谢谢。

    store.getProxy().setUrl('resources/Json/TestsStore.json');           
                store.load({
                    scope: this,
                    callback: function(records, operation, success) {
                        if (success) {
                                if(searchfield !=="") {                                
                                    if(store.data.items.length !==0){
                                        var length = store.data.items.length;
                                        for(var j=length; j--;) {
                                        if(store.data.items[j].data.name.search(new RegExp(searchfield, "i")) ===-1){
                                            store.data.items[j].remove();
                                        }
                                    }
                                  }
                                }
                            if(store.data.items.length ===0){
                                eGMonitorApp.util.Utility.showAlert('Searched text not available.','Tests');
                            }                       
                            this.getAccordionListRef().setStore(store);
                        }
                    }
                });
    

    【讨论】:

    • if(store.data.items[j].data.name.search(new RegExp(searchfield, "i")) ===-1){ store.数据.items[j].remove(); } 将感谢您的回复。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-12-06
    • 1970-01-01
    • 1970-01-01
    • 2014-08-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多