Left-side navigationView in Sencha Touch Framework (A question about Ext.data.TreeStore)

I want to dynamically set up the left-side navigation menu just like iPad-style.

So, I make some modification on the demo example. You could also visit this official example here.

sink.StructureStore = new Ext.data.TreeStore({
    model: 'Demo',
    //root: {
    //    items: sink.Structure
    //},
    proxy: {
        type: 'ajax',
        url: 'words.json',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

For easier implementation, I try to get the JSON data from the "words.json". (Ideally, JSONP type is better...tried, but no luck.)

Here is the content of "words.json":

{
    text: 'User Interface',
    cls: 'launchscreen',
    items: [{
        text: 'Buttons',
        card: demos.Buttons,
        source: 'src/demos/buttons.js',
        leaf: true
    },  
    {   
        text: 'Forms',
        card: demos.Forms,
        source: 'src/demos/forms.js',
        leaf: true
    },  
    {   
        text: 'List',
        card: demos.List,
        source: 'src/demos/list.js',
        leaf: true
    }]  
}

It ends up nothing appearing. What's wrong? Do I mistake it? (API here)

What do I want to do?

Like a dictionary, left side开发者_运维问答 are those navigation items of word. On clicking it, the meaning of the word will be showed in right-side view.

I can't run NestedList example in sencha framework. Clicking on the table cell and push another view on it (i.e., in Sencha: NestedList) is what I want to do.

Have tried and no luck:

1. use the NestedList example
2. replace proxy with ScriptTagProxy (JSONP)
3. use easier proxy implementation (showed in the code)

I am not so sure whether my description is clear enough or not, feel free to tell me which part is unclear. And thanks in advance!

If words.json looks like what you have above then that could be your problem.

This is what it should look like.

{
    "text": "User Interface",
    "cls": "launchscreen",
    "items": [{
        "text": "Buttons",
        "source": "src/demos/buttons.js",
        "leaf": true
    }, {
        "text": "Forms",
        "source": "src/demos/forms.js",
        "leaf": true
    }, {
        "text": "List",
        "source": "src/demos/list.js",
        "leaf": true
    }]
}

I've also attached a fully working copy of what you wanted using both a memory proxy (default) and an ajax proxy.

Ext.regApplication({
    name: 'test',
    launch : function(){
        var nL = new Ext.NestedList({
            store: test.stores.testTreeStore,
            fullscreen: true,
            itemTextTpl : '{text}'
        });
    }
});
Ext.ns('test.data');

test.data.words = {
    text: 'User Interface',
    cls: 'launchscreen',
    items: [{
        text: 'Buttons',
        source: 'src/demos/buttons.js',
        leaf: true
    },  
    {   
        text: 'Forms',
        source: 'src/demos/forms.js',
        leaf: true
    },  
    {   
        text: 'List',
        source: 'src/demos/list.js',
        leaf: true
    }]  
};

test.models.testTreeModel = Ext.regModel('testTreeModel', {
    fields: ['text','source','card','leaf'],
    proxy: {
        type: 'memory',
        data: test.data.words,
        //type: 'ajax',
        //url: 'words.json',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});
test.stores.testTreeStore = new Ext.data.TreeStore({
    model: 'testTreeModel'
});