View Full Version : Disappearing Wizard panel (rolls up and hides)

12 Aug 2009, 10:36 AM
I have a wizard that is rendered inside of a tab panel. When I render the wizard (autoload when clicking on the tab) I notice that the wizard panels all roll up (like someone pulling up a blind) leaving the tab panel empty except for the wizard tool bar. It seems as if an effect (fx) is in action but I haven't configured any for this panel.

var cardTabs = {
xtype: 'tabpanel',
id: 'card-tabs-panel',
plain: true, //remove the header border
activeItem: activeTabNum,
resizeTabs: true,
border: false,
defaults: {bodyStyle: 'padding:5px'},
title: 'Wizard',
id: 'example-wizard',
autoLoad: {url:'example_wizard/wizard.html', scripts: true},
bodyStyle: {background: '#efe5cb'}

Here is the actual wizard code:

* ================ CardLayout config (Wizard) =======================
var exampleCardWizard = Ext.getCmp('example-wizard');

var cardWizard = {
activeItem: 0,
height: 630,
width: 750,
defaults: {border:false},
style: {'padding':'5px','margin-left':'auto','margin-right':'auto','margin-top':'auto','margin-bottom':'auto','position':'relative','top':'5px','width':'860px','height':'620px','border':'5px ridge #9a7f2d'},
tbar: ['->', {
id: 'card-prev',
text: '&laquo; <b>PREVIOUS</b>',
handler: cardNav.createDelegate(this, [-1]),
disabled: true
id: 'card-next',
text: '<b>NEXT</b> &raquo;',
handler: cardNav.createDelegate(this, [1])
items: [{
id: 'card-0',
bodyStyle: {'text-align':'center'},
autoLoad: {url:'example_wizard/wizard1.html', scripts: true}
id: 'card-1',
bodyStyle: {'text-align':'center'},
autoLoad: {url:'example_wizard/wizard2.html', scripts: true}
id: 'card-2',

bodyStyle: {'text-align':'center'},
autoLoad: {url:'example_wizard/wizard3.html', scripts: true}




12 Aug 2009, 11:07 AM
And what layout do you imagine that the 'example-wizard' Container (http://extjs.com/deploy/dev/docs/?class=Ext.Container) is using to render and perhaps size its child items?

13 Aug 2009, 8:41 AM
It is using the same layout 'card' .....which is commonly used for both tab panels and wizards correct? Should I remove the layout from the wizard and let it inherit from it's parent?

var contentPanel = {
id: 'content-panel',
region: 'center',
layout: 'card',
activeItem: 0,
border: false,
autoScroll: false,

items: [