How can i get Nested List in sencha touch?

Question

I have a following main files:

app.js:

Ext.Loader.setConfig({
});
Ext.application({
    views: [
        'Login',
        'Inner',
        'Group',
        'Innerdata',
        'Grptoolbar'
    ],
    stores:[
        'MyStore'
    ],
    models:[
        'MyModel'
    ],
    name: 'chat',

    launch: function() {
        Ext.create('chat.view.Login', {fullscreen: true});
    }
});

Group.js: is a view file for list.

Ext.define('chat.view.Group', {
    extend: 'Ext.Group',
    alias: "widget.Group",
    xtype:'Group',
    requires:['Ext.dataview.List','Ext.data.Store'],

    config:{
    title:'My List',
    layout:'fit',
     items: [
        {
            xtype:'list',
            store:'MyStore',
            itemTpl:'<b>{name}<b>'
        },
     ]
  },
});

MyModel.js:

Ext.define('chat.model.MyModel',{
    extend:'Ext.data.Model',
    config:{
        fields: [
        {name: 'text', type: 'string'},
        {name: 'card'}
    ]
    }
});

MyStore.js

Ext.define('chat.store.MyStore',{
    extend:'Ext.data.TreeStore',
    config:{
        model:'chat.model.MyModel',
        root: {
       items: [{
            text: 'About',
            card: {xtype: 'Grptoolbar'},
            leaf: true
        }
        ],
        },
        autoLoad:true,
        proxy: {
        type: 'ajax',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
    }
});

I am trying to create Nested List.so i created store,model and view files.
currently i face this error:

Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: reader.tree

If i remove following lines form MyStore.js then the error is gone and app is running but i have not got List.

proxy: {
        type: 'ajax',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }   

so how can i solve it? so i get my nested list.

Answer 1

There is no "tree reader", so you cannot use the config type: 'tree' , the allowed options are: json, xml, data, array.

Also, there's no need to define a "tree reader" for proxy when you use nested list. I think just this is enough:

Ext.define('chat.store.MyStore',{
    extend:'Ext.data.TreeStore',
    config:{
        model:'chat.model.MyModel',
        root: {
          items: [{
            text: 'About',
            card: {xtype: 'Grptoolbar'},
            leaf: true
          }],
        },
        autoLoad:true,
        defaultRootProperty: 'items'
    }
    }
});