Sencha 触控面板在加载时呈现问题

Question

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

从选中的 tabPanel 中，我在其中包含元素，在本例中为其他按钮。在点击按钮时，我想加载我创建的另一个面板，它不是 tabBar 面板之一。

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

有时我附加到新面板的工具栏也会完全消失。我不知道为什么会这样，希望有人能向我解释我需要做什么。我正在使用最新版本的 Sencha Touch 1.x。

仅供参考：这是来自 (http://www.sencha.com/forum/showthread.php?171567-Loading-another-panel-causes-incorrect-rendering...&p=710474#post710474) 的 xpost。我没有得到有意义的答案，所以我来到 SO 寻求帮助。

代码片段如下：

选项卡中的初始选项卡

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

}
});

---

按钮点击应该加载的面板

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

---

标签面板

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

---

标志

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

Answer 1

我注意到您的代码中有几件事，尽管您的代码 sn-ps 不足以完全理解您的视图的结构：

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

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

• 添加后可以调用panel2或视口的doLayout()方法

• 如果您并不严格需要选项卡，请尝试使用带有卡片布局的视口。您可以使用setActiveItem() 在它们之间切换，也可以使用面板的add() 方法将新的添加到视口，而不是像现在这样使用数组。