Refresh nested list in sencha touch 2

Question

I'm having trouble redrawing my nested list using sencha touch 2. My code looks something like this:

var data = {items:[{text:'hello', leaf:true}]}; Ext.application({ name:'main', launch:function(){ Ext.define('ListItem', { extend: 'Ext.data.Model', config: { fields: ['text'] } }); var treeStore = Ext.create('Ext.data.TreeStore', { id: 'mystore', model: 'ListItem', defaultRootProperty: 'items', root: data}); Ext.create('Ext.NestedList', { id:'mylist', fullscreen: true, store: treeStore }); } // end launch:function() }); // end Ext.application 

At run time, I change the data variable like this: data.items[0].text = 'bye' . How to get a list of attached files for updating and show bye ? I tried the following, but none of them work:

 var mystore = Ext.data.StoreManager.lookup('mystore'); mystore.setRoot(data); Ext.getCmp('mylist').refresh(); // refresh, update, dolayout, repaint etc... does not exist. Ext.getCmp('mylist').bindstore(mystore); // bindstore is deprecated 

Answer 1

you have to change the data through record / storage instances, only then Ext.NestedList will be automatically updated

 var record = treeStore.getAt(0); record.set('text', 'bye'); 

Answer 2

Work with data in the repository should be performed using getById () and getAt (), which return Models that implement NodeInterface. Add data via appendChild, and the rest will be self-evident from there. The id value can be overridden in your data to make it easier to navigate the tree.

 getStore().getById('myFirstLevelId').getById('mySecondLevelId').getById('myThirdLevelId') 

http://docs.sencha.com/touch/2-0/#!/api/Ext.data.NodeInterface