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,501
    Vote Rating
    47
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi