Sencha touch Sencha触摸面板加载时渲染问题

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

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

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

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

仅供参考：这是来自(http://www.sencha.com/forum/showthread.php?171567-加载另一个面板会导致不正确的渲染…&p=710474#post710474）。我没有得到一个有意义的答案，所以我希望能得到一些帮助

下面是代码片段： 选项卡面板中的初始选项卡

---

按钮点击应加载的面板 }))

---

主面板创建

---

工具栏创建

---

标志

---

我在您的代码中注意到了几点，尽管您的代码片段不足以完全理解视图的结构：

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

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

• 添加panel2或视口的

  doLayout（）

  方法后，可以调用它

• 如果不严格需要选项卡，请尝试使用具有卡片布局的视口。您可以使用

  setActiveItem（）

  在它们之间切换，也可以使用面板的

  add（）

  方法将新的对象添加到视口中，而不是像现在这样使用数组

---

非常感谢您的回复。我已经尝试了提议的改变。除非我旋转设备，否则页面仍无法正确呈现。我刚刚更新了上面的代码片段，以更新我制作主面板的方式，等等。

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

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