sencha-touch - 分组嵌套列表？

Question

如何在 ST2 中创建分组嵌套列表，就像在带有 Storyboard 的 Xcode 中一样？我只需要根级别的组。这里有一些关于它在本机应用程序中的样子的想法。

我在 Sencha 的 NestedList文档中没有看到任何内容。

Answer 1

在 ST2 中，NestedList 方法 getSubList() 现在是 getList()，它的工作方式略有不同。覆盖它以传播分组信息对我有用：

/**
 * Override Ext.dataview.NestedList.getList to propagate grouping info from
 * parent NestedList to List sublist.
 */
getList: function(node) {

    var list = this.callParent(arguments);

    list.grouped = this.grouped;
    list.store.setGrouper(this.getStore().config.grouper);

    return list;
}

Answer 2

您可以查看 KitchenSink 示例（用户界面 -> 列表 -> 分组） http://docs.sencha.com/touch/2-0/#!/example/kitchen-sink

这是一个简单的列表，只是在 store 中有一个 storers/grouper 属性：

Ext.create('Ext.data.Store', {
id: 'ListStore',
model: 'Contact',
sorters: 'firstName',
grouper: function(record) {
    return record.get('firstName')[0];
},
data: [...

然后在列表项设置中调用它：

items: [{
            width: Ext.os.deviceType == 'Phone' ? null : 300,
            height: Ext.os.deviceType == 'Phone' ? null : 500,
            xtype: 'list',
            store: 'ListStore',
            itemTpl: '<div class="contact"><strong>{firstName}</strong> {lastName}</div>',
            grouped: true,
            indexBar: true
        }]

希望它会有所帮助:)

Answer 3

创建一个简单的分组列表并为组标题设置一个“点击”事件。在点击标题时，打开另一个面板并显示仅包含该组项目的列表。

Answer 4

已经在 Sencha Touch 论坛上问过。

http://www.sencha.com/forum/showthread.php?122238-Grouped-Nested-List。