将元素添加到选项卡面板的一部分

Question

所以我有一个 TabPanel 定义如下：

panel = new Ext.TabPanel({
            fullscreen: true,
            cardSwitchAnimation: 'slide',
            ui: 'dark',
            items: [home, faq, about]
        });

home 部分定义如下：

home = new Ext.Component({
            title: "Home",
            scroll: 'vertical',
            tpl: [
                '<tpl for="."',
                ' <div messageId="{message_id}">',
                ' </div>',
                '</tpl>'
            ]
        });

现在，仅在 home 选项卡上，我想要一个部分就在 TabPanel 下面，它将包含一些其他元素，具体来说，一个文本框、按钮和两个下拉列表。

如何添加它们，以便内容部分仍然以相同的方式运行，并且直到这些添加的元素下方才开始？

Answer 1

这并不是 100% 清楚你的目标是什么，但听起来你只是想在你的“主页”卡中将两个面板堆叠在一起，如下所示......如果你需要控制每个子项目有多少空间我认为您需要特别查看 layout 属性 hbox 。

home = new Ext.Panel({
    title: "Home",
    scroll: 'vertical',
    items: [
        {
            html: 'first panel'
        },
        {
            tpl: '<tpl for="."><div messageId="{message_id}"></div></tpl>'
        }
    ]
});

或者，您可能一直在谈论拥有第二个工具栏之类的东西，在这种情况下，请查看dockedItems。