After store filter expand and collapse is not showing child data in AccordionList?

Question

I have implemented accordion list by referring this link. http://docs.kawanoshinobu.com/touch/#!/api/Ext.ux.AccordionList . Accordion is working fine without any issues. I need to search text only on accordion list headers. After search, Once if got accordion headers. Should be, i able to expand and collapse those headers need to see the header child items. I have applied store filter, it is filtered store and displayed filtered data (refer image). expand and collapse is happening on header right and down icon is changing. but not able to see the child nodes data of particular header on expand mode. child nodes are available of that header(seen in console.log()). Is there any other way to apply filter for accordion list/tree store? Great appreciate. Thank you. in above link itself i have applied store filter it's behaviors same as what i am facing issue on my code. In below code i passing filter text 'to'. it is filtered today, very nice. but when click on expand child nodes are not visible.

Before store filter After store filter code is here:

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
 });

Ramesh Lamani Ramesh Lamani · Accepted Answer · 2013-08-14T07:45:14

I have achived. store.filter function, filter the text nicely but if it has child nodes also it wont show. because we have searched some particular text on store. after filter shows only those filter text. I have gone another way. it is working very nicely as per my requirement. I am calling web service store.load(). In store searching for entered text. if entered text is not available at parent level, removing that particular items form store. After iteration, final store assigning to accordion list. accordion list shows related search text data. cheers :). below is code. Thank you.

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);
                    }
                }
            });

After store filter expand and collapse is not showing child data in AccordionList?

1 Answers