Sencha Touch Panel Render Issue on Load

Question

Long story short: I've got a mainPanel which consists of a tabBar on the bottom and a docked toolBar on top.

From a tabPanel that is selected, I have elements inside of it, in this case other buttons. On a button tap, I want to load a different panel that I've created, which is not one of the tabBar panels.

So I'm hiding the current tabPanel and showing the panel that is tied to the button click. I can get it to show up. The issue is that the panel that shows doesn't render correctly until I actually rotate the device. The image / items on the panel are usually off to the bottom right.

Sometimes the toolbar that I have attached to the new panel disappears completely as well. I'm clueless as to why this is happening, and hoping someone can explain to me what I need to do. I'm using the latest version of Sencha Touch 1.x.

fyi: this is a xpost from (http://www.sencha.com/forum/showthread.php?171567-Loading-another-panel-causes-incorrect-rendering...&p=710474#post710474). I wasn't getting an answer that made sense so I'm coming to SO for hopefully some assistance.

Code Snippets Below:

INITIAL TAB FROM 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",
}

BUTTON FOR NEW PANEL

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

}
});

PANEL THAT BUTTON TAP SHOULD LOAD

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]

});

MAIN PANEL CREATION

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

TOOLBAR CREATION

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

Edward B Edward B · Accepted Answer · 2012-01-10T23:08:22

There are a couple of things that I've noticed in your code, although your code snippets fall short to fully understand how your views are structured:

First of all, try adding the element before hiding the active one
```
viewStack.push(panel2);
mainTabPanel.hide();
panel2.show();
```
You could call panel2 or the viewport's doLayout() method after adding it
If you don't strictly need tabs, try using a viewport with a card layout. You can switch between them with setActiveItem() and you can add new ones to the viewport with the panel's add() method instead of using an array like you're doing right now.