Sencha Touch - 需要一个嵌套列表示例答案

【问题标题】：Sencha Touch - In need of a nested list exampleSencha Touch - 需要一个嵌套列表示例
【发布时间】：2011-06-20 16:41:56
【问题描述】：

我需要一个简单的嵌套列表视图示例。类似的东西……

_{（来源：roosteronacid.com）}

当您单击一个项目时，您将转换（幻灯片）到包含另一个列表的下一个视图/卡片，顶部菜单中有一个“后退”按钮。以此类推。

列表不一定有三层深。我想要一个示例，其中包括一个包含三个子项的项目，以及一个直接将您带到“最终”视图的项目。

【问题讨论】：

标签： sencha-touch

【解决方案1】：

您应该查看 vimeo 上的 sencha touch 视频。这里有一个回答你的问题：

http://vimeo.com/20580117

【讨论】：

【解决方案2】：

试试下面给出的代码，它将帮助您了解使用 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]
    });
}

})

以下链接将帮助您轻松找到更多信息http://dev.sencha.com/deploy/touch/docs/。

还可以在 sencha touch 可下载包中查找示例。

【讨论】：

【解决方案3】：

一开始就忽略 PhoneGap 的东西，this tutorial 有你需要的大部分。

【讨论】：

【解决方案4】：

这真的很容易做到。查看用户界面示例下Kitchen Sink 中的嵌套列表，然后单击“源”按钮查看代码..

【讨论】：

【解决方案5】：

我采用了不同的方法，使用原始 HTML。

【讨论】：