extjs - Sencha Touch 2 选项卡面板：其他选项卡中的内容在错误的位置

Question

我正在学习 Sencha Touch 2，但我对标签面板问题感到困惑。

这就是我定义我的观点的方式。

Ext.define('NewApp.view.Main', {
extend: 'Ext.tab.Panel',
config: {
    activeItem: 1,
    items: 
    [{
        title: 'info',
        iconCls: 'info',
        items: 
        [{
            xtype: 'button',
            text: 'button1',
        }]
    },
    {
        title: 'more',
        iconCls: 'more'
    }]
}

});

在 app.js 中：

Ext.application({
name: 'NewApp',

requires: [
    'Ext.tab.Panel',
    'Ext.Button'
],

views: [
    'Main'
],

launch: function() {
    Ext.Viewport.add(Ext.create('NewApp.view.Main'));
},

});

这很简单。在一个名为“信息”的选项卡上有一个按钮，而在另一个选项卡上的“更多”，什么都没有。activeItem 设置为 1 以确保标题为“更多”的选项卡将首先显示。但是，当我启动该应用程序时，我发现输出与预期不同。

图片链接

该按钮应该显示在第一个选项卡上，现在不仅显示在第一个选项卡上，还显示在第二个选项卡上。但是，当我滑到“信息”选项卡并滑回“更多”选项卡时，按钮消失了。

谁能告诉我我应该怎么做才能在第一个场景中摆脱第二个选项卡上的按钮？

Answer 1

由于“停靠”属性，我曾经遇到过类似的问题。

尝试设置 tabbar docker bot 或更改布局配置。

当这些属性定义不正确时，ST 对它们不太友好。

Answer 2

尽量不要在列表中设置activeItem。

在启动方法中添加以下行：

Ext.Viewport.down('.tabpanel').setActiveItem(1);

这样就可以了。