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'));
},

}）;

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

image link

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

任何人都可以告诉我如何摆脱第一个场景中第二个标签上的按钮？

Answer 1

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

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

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

这样就行了。

Answer 2

由于'停靠'属性，我曾经遇到类似问题。

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

如果没有正确定义，ST对这些属性并不友好。

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

2 个答案: