Sencha Touch 2.4 : how to add multiple records to TreeStore programatically

Question

I'm having troubles with understanding of how to programatically add data to an already initialized TreeStore.

Consider the example from Sencha Touch docs:

  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.addData(data.items);  // I need to add data here

   console.log(store.getAllCount()) // prints 4 but should be 13

As a result I get only 4 parent items added. No children are added.

Thanks in advance.

Answer 1

You only add the first level of your tree. ExtJS is looking for children to make his tree internally.

Change all your items by children in your JSON:

var data = {
      "items" : [{
            "text" : "Today",
            "children" : [{                 // <<== HERE
                        "text" : "Eat",
                        "leaf" : true
                    }, {
                        "text" : "Sleep",
                        "leaf" : true
                    }, {
                        "text" : "Drinking",
                        "leaf" : true
                    }]
        }, {
            "text" : "Tomorrow",
            "children" : [{               // <<== AND HERE

            // etc, ...