Question

长话短说：我有一个主面板，它由底部的tabBar和顶部的停靠工具栏组成。

从选中的tabPanel中，我有其中的元素，在本例中是其他按钮。在按钮上，我想加载我创建的不同面板，这不是tabBar面板之一。

所以我隐藏了当前的tabPanel并显示了与按钮点击相关联的面板。我可以让它出现。问题是，在我实际旋转设备之前，显示的面板无法正确呈现。面板上的图像/项目通常位于右下角。

有时我附加到新面板的工具栏也会完全消失。我对于为什么会发生这种情况一无所知，希望有人可以向我解释我需要做什么。我正在使用Sencha Touch 1.x的最新版本。

fyi：这是来自（http://www.sencha.com/forum/showthread.php?171567-Loading-another-panel-causes-incorrect-rendering...&p=710474#post710474的xpost ）。我没有得到一个有意义的答案，所以我希望得到一些帮助。

下面的代码片段：

来自TABPANEL的初始标签

var TAB1 = {
title: "TAB1",
layout: 'vbox',

            items:[
            {html: "<h1>TAB1</h1>"},
            panel2_btn, panel3_btn, panel4_btn,
            {flex: 1},
            {html: "<h3>EMAIL US</h3>"},
            sevenday_btn
    ],
iconCls: 'TAB1',
style: "color: #2e2e2e; font-family: 'Arial'; font-weight: bold",
}

新面板按钮

var panel2_btn = new Ext.Button({
centered: true,
cls: 'button',
text: 'TAP FOR PANEL2',
handler: function(e){
    mainTabPanel.hide();
    viewStack.push(panel2);
    panel2.show();

}
});

BUTTON TAP应该加载的面板

var panel2 = new Ext.Panel({
id: 'panel2',
layout: 'vbox',
fullscreen: true,
dockedItems: [
   backToolbar],
items: [
            {flex: 1},
            {html: "<h1>PANEL 2</h1><img src='resources/assets/panel2.png' id='panel2'/>"},
            {flex: 1}
]
});

TAB PANEL

var tabPanel = new Ext.TabPanel({
id: 'tabPanel',
dock: 'bottom',
styleHtmlContent: true,
tabBar: {
    cls: 'tabBar',
    dock: 'bottom',
    layout: {
        pack: 'center'
    }
},
defaults: {
    scroll: 'vertical',
    layout: 'hbox'
},
items: [TAB1, TAB2, TAB3, TAB4, TAB5]

}）;

主要面板创作

var mainPanel;

Ext.setup({
tabletStartupScreen: 'startup-splash-logo.png',
phoneStartupScreen: 'phone-startup-splash-logo.png',
icon: 'icon.png',
glossOnIcon: true,
fullscreen: true,
onReady: function(){
    mainPanel = new Ext.Panel({
        id: 'mainPanel',
        fullscreen: true,
        dockedItems: [
            toolbar
            ],
        items: [tabPanel],
        layout: 'card',
        scroll: 'vertical'
    });
}
});

工具栏创建

var toolbar = new Ext.Toolbar({
id: 'mainToolbar',
dock: 'top',
cls: 'toolbar',
layout: {
    pack: 'justify',
    align: 'center'
},
items: [
    {xtype: 'spacer'},
    logo,
    {xtype: 'spacer'}
    ]
});

LOGO

var energy_fitness_image = new Ext.BoxComponent({
centered: true,
cls: 'energy_fitness_logo'
});

Answer 1

我在您的代码中注意到了一些事情，尽管您的代码段无法完全理解您的视图的结构：

首先，尝试在隐藏活动元素之前添加元素

viewStack.push(panel2);
mainTabPanel.hide();
panel2.show();

添加后可以调用panel2或viewport的doLayout()方法
如果您不严格需要制表符，请尝试使用带有卡片布局的视口。您可以使用setActiveItem()在它们之间切换，并且可以使用面板的add()方法向视口中添加新的，而不是像现在这样使用数组。

Sencha触摸屏渲染负载问题