Sencha Touch - In need of a nested list example

I'm in need of a simple nested list-view example. Something along the lines of this...

_{(source: roosteronacid.com)}

When you click an item, you will transition (slide) to the next view/card containing another list, with a "back"-button in the top-menu. And so on and so forth.

The lists doesn't necessarily have to three levels deep. I'd like an example which includes, say, one item with three sub-items, and one item which takes you directly to the "final" view.

you should look into the sencha touch videos on vimeo. here is one that answers your question:

http://vimeo.com/20580117

Try the code given below it will help you understand the basic functionality of created a nested list using sencha touch.

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {

    var data = {
        text: 'Groceries',
        items: [{
            text: 'Drinks',
            items: [{
                text: 'Water',
                items: [{
                    text: 'Sparkling',
                    leaf: true
                },{
                    text: 'Still',
                    leaf: true
            }]
            }, {
                text: 'Coffee',
                leaf: true
            }, {
                text: 'Espresso',
                leaf: true
            }, {
                text: 'Redbull',
                leaf: true
            }, {
                text: 'Coke',
                leaf: true
            }, {
                text: 'Diet Coke',
                leaf: true
           }]
        },{
        text: 'Fruit',
        items: [{
            text: 'Bananas',
            leaf: true
        },{
            text: 'Lemon',
            leaf: true
        }]
        },{
            text: 'Snacks',
            items: [{
                text: 'Nuts',
                leaf: true
        },{
            text: 'Pretzels',
            leaf: true
        },{
            text: 'Wasabi Peas',
            leaf: true
        }]
    },{
        text: 'Empty Category',
        items: []
    }]
};

    Ext.regModel('ListItem', {
        fields: [{name: 'text', type: 'string'}]
    });

    var store = new Ext.data.TreeStore({
        model: 'ListItem',
        root: data,
        proxy: {
            type: 'ajax',
            reader: {
                type: 'tree',
                root: 'items'
            }
        }
    });

    var leftNav = new Ext.NestedList({
        dock: 'left',
        useTitleAsBackText: true,
            title: '',
            displayField: 'text',
            width: '350',
            store: store    
    });

    new Ext.Panel({
        fullscreen: true,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        defaults: {
            flex: 1
        },
        dockedItems:[leftNav]
    });
}

})

Following link will help you to find more info easily http://dev.sencha.com/deploy/touch/docs/.

Also look for examples in the sencha touch downloadable package.

Ignoring the PhoneGap stuff at the start, this tutorial has most of what you need.

That's really easy to do. Check out the Nested List in the Kitchen Sink under User Interface examples and click the "Source" button to see the code..

I went with a different approach, using raw HTML.

来源：https://stackoverflow.com/questions/6414589/sencha-touch-in-need-of-a-nested-list-example

标签

sencha-touch