View Full Version : panel displays only after browser resize or orientation change

19 Mar 2012, 7:03 AM
I have a card layout with two cards, 'welcomescreen' and 'apppanel'. Welcomescreen has a continue button in a toolbar that when clicked should display apppanel. It does switch cards, but apppanel only displays if I resize my browser, or if you change orientation.

What am I doing wrong?

var appPanel = new Ext.Panel({
id: 'appPanel',
layout: {
type: "hbox",
align: "stretch"},
items: amber, //amber is a carousel
dockedItems: [
form, //the form stretches across the bottom of the screen and displays data from a store
rightToolbar //this contains navigation buttons and a scrollable list

var welcomeToolbar = new Ext.Toolbar({
id: 'welcomeToolbar',
title: 'Welcome',
layout: 'hbox',
items: [
{ xtype: 'spacer' },
id: 'continueButton',
text: 'Continue',
ui: 'action',
handler: function () {
amber.doLayout(); //layout the carousel with new content
appPanel.doLayout(); //??? doesn't seem to work

var welcomeScreen = new Ext.Panel({
id: 'welcomeScreen',
html: "<h1>tester</h1>",
dockedItems: [welcomeToolbar, chapterIndexContainer],
listeners: { beforedeactivate: function(cmp) {
Ext.getBody().mask(Ext.LoadingSpinner + '<div class="x-loading-msg">Loading...</div>', 'x-mask-loading', true);
}//close listeners

var cardPanel = new Ext.Panel({
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
items: [welcomeScreen, appPanel]

19 Mar 2012, 10:55 AM
Just by that code, there is nothing that would prevent it.

19 Mar 2012, 10:57 AM
Hmm, thanks for reviewing what I have.

What can prevent this, or cause this kind of issue? Is it kind of an "order of operations" issue, and depending on when I call my MAINPANEL.doLayout() things will work properly or cause the behavior I'm experiencing?

19 Mar 2012, 11:16 AM
ST1 has been plagued with layout issues. Sometimes the only option is to go with ST2 as the layouts are totally different and are managed by the browser, not JavaScript.

19 Mar 2012, 12:06 PM
After a deeper review of what as happening when I switched cards here, and the comment regarding how what I posted should work fine, I've resolved my issue.

What I posted was working fine, when I clicked my 'continue' button, the next card would load fine.

It turns out I had a different loading/refreshing order if someone clicked an item in the list that displays on my welcome screen. I adjusted that loading/refreshing order to match what occurred if you clicked the 'continue' button and things appear resolved nicely.

What wasn't working:

amber.doLayout();//amber is a carousel
appPanel.doLayout();//apppanel is my main content panel

What does work:


Hope this helps somebody, thanks.