Sencha touch 2 如何在选项卡面板中嵌入嵌套列表？

我正在尝试创建一个

选项卡panel

视图，该视图在第一个选项卡上包含一个

splitview

控制器。设想一下，将“厨房水槽”演示放在选项卡面板的一个选项卡中

其他不包含嵌套列表

我尝试将nestedlist放入容器中，您可以在下面显示的一些注释代码中看到

目前，此工作代码仅显示占据第一个选项卡上整个部分的嵌套列表：

Ext.application({
    name: 'Test',

    requires: [
        'Ext.dataview.NestedList',
        'Ext.navigation.Bar'
    ],

    launch: function() {
        Ext.create("Ext.TabPanel", {
            fullscreen: true,
            tabBarPosition: 'bottom',
            items: [{
                id: 'tab4',
                title: 'Tab4',
                iconCls: 'star',
                xtype: 'container',
                items: [{
                    xtype: 'nestedlist',
                    displayField: 'text',
                    docked: 'left',
                    store: store
                }, {
                    html: 'Detail View'
                }]
            }, {
                id: 'tab2',
                title: 'Tab2',
                iconCls: 'star',

                html: 'No nav bar?'
            }, {
                id: 'tab3',
                title: 'Tab3',
                iconCls: 'star',

                html: 'Screen3'
            }]
        }).setActiveItem(0);
    }
});

商店设置：

Ext.Loader.setConfig({ enabled: true });

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
    }]
  }
]};

Ext.define('ListItem', {
    extend: 'Ext.data.Model',
    config: {
        fields: [{
                name: 'text',
                type: 'string'
        }]
    }
});

var store = Ext.create('Ext.data.TreeStore', {
    model: 'ListItem',
    defaultRootProperty: 'items',
    root: data
});

---

好的。我为您创建了以下示例：

您也可以从这里下载整个源代码：（相当大，因为它包含SDK）

一定要查看所有的文件，因为我已经添加了很多文档

一些注意事项：

我创建了一个名为

Sencha.view.SplitView

的新组件。这显然可以称为任何东西。它有一个X类型的

splitview

，因此我们只需要将它包含在

Main.js

文件中（这是一个

Ext.tab.Panel

）

{
    xtype: 'splitview',
    title: 'SplitView',
    store: 'Items'
}

因为这是选项卡面板中的一个项目，所以我们也需要为它提供

标题

配置。当然，我们可以在任何地方包含此Splitview组件

如您所见，它有一个

存储

配置，该配置在SplitView中定义：

config: {
    /**
     * We create a custom config called store here so we can pass the store from this component
     * (SplitView) down into the nested list when it updates. Checkout {@link #updateStore}
     * @type {Ext.data.Store}
     */
    store: null
}

这用于将存储从splitview传递到嵌套列表（我们将在一秒钟内完成）。当然，除非我们添加适当的方法来更新嵌套列表，否则该配置将不起任何作用：

/**
 * This is called when the {@link #store} config has been updated.
 * We simply check if the nested list has been created, and if it has, set the store
 * on it with the new value.
 */
updateStore: function(newStore) {
    if (this.nestedList) {
        this.nestedList.setStore(newStore);
    }
}

如您所见，我们只是用SplitView存储的新值更新

nestedList

（如果存在）存储

在SplitView的

initialize

方法中，我们创建了

detailContainer

（嵌套列表的细节卡应该放在哪里）和

nestedList

，然后将它们添加到SplitView。确保查看我们提供的

nestedList

的一些配置，因为它们很重要。存储配置：

// Set the store of this nested list to the store config of this component (Splitview)
store: this.getStore()

detailCard

和

detailContainer

配置：

// Tell the nested list to have a detail card and put it inside our new detailContinaer
detailCard: true,
detailContainer: this.detailContainer

当然还有听众，所以我们知道当事情发生变化时：

// And finally add a listener so we know when to update the detail card
listeners: {
    scope: this,
    leafitemtap: this.onLeafItemTap
}

最后，我们将

onReadItemTap

方法添加到Splitview中（我们在上面添加了侦听器），该方法应使用新信息更新详细信息卡：

/**
 * This is called when a leaf item is tapped in the nested list, or when the detail card
 * should be updated. In here, we just get the record which was tapped and then set the HTML
 * of the detail card.
 */
onLeafItemTap: function(nestedList, list, index, node, record, e) {
    var detailCard = nestedList.getDetailCard();
    detailCard.setHtml(record.get('text'));
}

---

希望这有意义并对您有所帮助。如果没有，请告诉我。

您到底想要什么？选项卡中的“选择”视图，然后是另一个选项卡上的“详细信息”视图？或者第一个选项卡中的两个视图？想想“厨房水槽”演示放在TabPanel的一个选项卡中。单击我包含的链接。现在图像显示该屏幕是TabPanel中的一个选项卡。它是TabPanel中的一个主/详细控制器。如果有帮助，我可以尝试绘制线框。谢谢。我删除了sdk，并将其余部分放在github上：（TabBarAndNestedList）