1. #1
    Ext User
    Join Date
    Aug 2009
    Posts
    36
    Vote Rating
    0
    Chris55 is on a distinguished road

      0  

    Default Best Practice: Cardlayout and FormPanel Structure

    Best Practice: Cardlayout and FormPanel Structure


    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

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  3. #3
    Ext User
    Join Date
    Aug 2009
    Posts
    36
    Vote Rating
    0
    Chris55 is on a distinguished road

      0  

    Default


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

  4. #4
    Ext User cerad's Avatar
    Join Date
    Dec 2007
    Posts
    226
    Vote Rating
    0
    cerad is on a distinguished road

      0  

    Default


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

  5. #5
    Ext User
    Join Date
    Aug 2009
    Posts
    36
    Vote Rating
    0
    Chris55 is on a distinguished road

      0  

    Default


    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.

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

Thread Participants: 2