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
*********************************/