update a nested list in sencha touch 2

Question

I'm having trouble redrawing my nested list with sencha touch 2. My code looks something like the following;

  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

During run time, I modify the data variable like so data.items[0].text = 'bye'. How do I get the nestedlist to refresh 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

Working with data within a store is to be done using getById() and getAt(), which return Models that implement NodeInterface. Add data via appendChild, and the rest is self explanatory from there. The id value can be overridden in your data to make navigating the tree easier.

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

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

Answer 2

you should change data through record/store instances only then the Ext.NestedList will be automatically updated

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