Reputation: 21727

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...

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.

Upvotes: 5

Answers (5)

Case

Reputation: 1847

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..

Upvotes: 1

Mike Kwan

Reputation: 24447

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

Upvotes: 1

Gaurav Sharma

Reputation: 2848

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.

Upvotes: 5

cllpse

Reputation: 21727

I went with a different approach, using raw HTML.

Upvotes: 0