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

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