Best Practice: Cardlayout and FormPanel Structure

[Chris55]

All,

I would like to know the "best practice" as it relates to the structure of a cardlayout and multiple forms (a formpanel wizard). Should the structure be this (sorry about the indentation - it never works when handcoding directly into the forum editor):

// local formpanel variables
var vforminput_1 = ...;
var vforminput_2 = ...;

// window containing cardlayout
Application.UX.SomeFormWiz = Ext.extend(Ext.Window, {

initComponent:function() {

Ext.apply(this, {

items: [

xtype: 'window'
,layout: 'card'
,deferredRender: true
,activeItem: o
,bbar: [

'->'
,{

id: 'back'
,text: 'Previous'
}
,{

id: 'next'
,text: 'Next'
}
]
,items: [

vforminput_1
,vforminput_2
]
]
}
}
});

Ext.reg('wizardA', Application.WizardA);

Or is there another layout structure I should be aware of and will withstand future framework syntax upgrades? Thank you in advance for your assistance.

Chris

[Animal]

Do not use multiple FormPanels - you want a single submission don't you?

Use a single layout: 'card' FormPanel in the Window, and the individual cards are just {xtype: 'container', layout: 'form'}

Don't forget that then the Window must be layout: 'fit' to fit that FormPanel exactly into itself.

[Chris55]

Thank you, Animal. I will make the necessary changes and post the results for others who are also new to Extjs.

[cerad]

And wrap your posted code in [PHP ][/PHP ] tags. Indenting will be preserved.

[Chris55]

I have updated my window (layout: 'fit') to contain a form (layout: 'card') swapping containers (layout: 'form'). The source is presented below. However, my menuitem handler generates an exception when instantiating my extended class (Application.UX.BugReport). The error - "is not a constructor." Unfortunately, I cannot test the card (wizard) functionality until this is resolved. And by the way, I though that a constructor is implicitly created when you extend a base Ext UI class. Thank you for your assistance.



/*********************************
Start: application.ux.bugreport.js
*********************************/
var vbugreport_1 = new Ext.Container(
{
layout: 'form'
,items:[
{
autoHeight: true
,xtype: 'label'
,name: 'lblOverview'
,text: 'Overview...'
}
]
}); // eo vbugreport_1
var vbugreport_2 = new Ext.Container(
{
layout: 'form'
,items:[
{
autoHeight: true
,xtype: 'label'
,name: 'lblOverview'
,text: 'Step 1...'
}
]
}); // eo vbugreport_2
var vbugreport_3 = new Ext.Container(
{
layout: 'form'
,items:[
{
autoHeight: true
,xtype: 'label'
,name: 'lblOverview'
,text: 'Step 2...'
}
] }); // eo vbugreport_3
var vbugreport_4 = new Ext.Container(
{
layout: 'form'
,items:[
{
autoHeight: true
,xtype: 'label'
,name: 'lblOverview'
,text: 'Step 3...'
}
]
}); // eo vbugreport_4

Application.UX.BugReport = Ext.extend(Ext.Window,
{
initComponent:function() {
Ext.apply(this, {
items: [
{
xtype: 'window'
,title: 'Report A Bug'
,modal: true
,width: 600
,resizable: true
,layout: 'fit'
,items: [
{
xtype: 'form'
,layout: 'card'
,deferredRender: true
,activeItem: 0
,bbar: [
'->'
,{
id: 'back'
,text: '<< Previous'
}
,{
id: 'next'
,text: 'Next >>'
}
,{
id: 'cancel'
,text: 'Cancel'
}
]
,items: [
vbugreport_1
,vbugreport_2
,vbugreport_3
,vbugreport_4
]
}
]
}
]
}
)
Application.UX.BugReport.superclass.initComponent.apply(this, arguments);
} // eo initComponent
}); // eo Application.UX.BugReport

Ext.reg('bugreport', Application.UX.BugReport);
/*********************************
End:application.ux.bugreport.js
*********************************/

/*********************************
Start: application.js
*********************************/
var vHelpMenuItems = new Ext.menu.Menu({
items: [
{
text: 'Online Docs'
/*,iconCls: ''*/
}
,{
text: 'Customer Service'
/*,iconCls: ''*/
,menu: [
{
text: 'Report a Bug'
,handler: function() {
var vBugReport = new Application.UX.BugReport(); // blows-up here as 'is not a constructor'
vBugReport.show();
}
/*,iconCls: ''*/
}
,{
text: 'Suggest Feature or Enhancement'
/*,iconCls: ''*/
}
, '-'
,{
text: 'Contact Us'
/*,iconCls: ''*/
}
]
}
]}) // eo vHelpMenuItems
/*********************************
End: application.js
*********************************/