如何在 TabPanel 中嵌入 NestedList？

Posted 2023-02-25

【中文标题】如何在 TabPanel 中嵌入 NestedList？

【英文标题】：How to Embed a NestedList in a TabPanel?

【发布时间】：2012-03-14 19:37:02

【问题描述】：

我正在尝试创建一个 tabpanel 视图，该视图在第一个选项卡上包含一个 splitview 控制器。想想“厨房水槽”演示放在标签面板的一个选项卡中。

其他不包含嵌套列表。

http://dev.sencha.com/deploy/touch/examples/production/kitchensink/

我尝试将嵌套列表放入容器中，您可以在下面显示的一些注释代码中看到它。

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

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
);

【问题讨论】：

你到底想要什么？选项卡中的“选择”视图，然后是另一个选项卡上的“详细信息”视图？还是第一个选项卡中的两个视图？

认为“厨房水槽”演示放置在 TabPanel 的一个选项卡中。单击我包含的链接。现在想象该屏幕是选项卡面板中的一个选项卡。它是 TabPanel 内的主/详细控制器。如果有帮助，我可以尝试绘制线框。

【参考方案1】：

好的。我为你创建了这个例子：http://www.senchafiddle.com/#ynn40

您也可以从这里下载整个源代码：http://rwd.me/FG5s（相当大，因为它包含 SDK）

请务必查看所有文件，因为我添加了很多文档。

一些注意事项：

我创建了一个名为Sencha.view.SplitView 的新组件。这显然可以称为任何东西。它的 xtype 为 splitview，因此我们可以简单地要求它并将其包含到我们的 Main.js 文件中（这是一个 Ext.tab.Panel。

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

因为这是 tabPanel 中的一项，我们也需要给它title 配置。当然，我们可以在任何地方包含这个 Splitview 组件。

如您所见，它有一个在 SplitView 中定义的store 配置：

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

这用于将 store 从 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

最后，我们将onLeadItemTap 方法添加到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'));

希望这是有道理的并对您有所帮助。如果没有，请告诉我。

【讨论】：

谢谢。我删除了 sdk 并将其余的放在 github 上：github.com/melling/SenchaTouch2 (TabBarAndNestedList)