1. #1
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    5
    Bucs is on a distinguished road

      0  

    Default Mixing column layouts on form

    Mixing column layouts on form


    I am trying to create a form (within a tab) that mixes single column fields with double column fields. It draws the form but I get a blank space (the width of the form) between the two column types defined on the form and haven't a clue where it is coming from. I think I am doing this correctly, but maybe not.

    Here is the tab control definition that will house the form:

    Code:
           var tabs = new Ext.TabPanel({
               id: 'myTabPanel',
               activeTab: 0,
               plain: true,
               border: true,
               frame: false,
               tabPosition: 'bottom',
               layoutOnTabChange: true,
               defaults: { autoScroll: false },
               items: [
               {
                   id: 'tab1',
                   title: 'Shipping',
                   layout: 'fit',
                   items: this.constructTabShipping()
               }, {
                   id: 'tab2',
                   title: 'Billing',
                   layout: 'fit',
                   items: this.constructTabBilling()
               }]
           });
    
           return tabs;
    Here is the method called for constructing the first form for Shipping:
    Code:
        , constructTabShipping: function(){
    
            var form = new Ext.FormPanel({
                id: 'myForm',
                xtype: 'form',
                layout: 'fit',
                frame: false,
                border: true,
                bodyStyle: 'padding:5px 5px 5px 5px; ',
                items: [
                {
                    layout: 'form',
                    defaultType: 'textfield', 
                    labelWidth: 55,
                    defaults: {itemCls: 'smallLabel',
                                anchor: '100%',
                                fieldClass: 'smallField'},                    
                    items: [
                            new Ext.form.ComboBox({
                                id: 'caseticket_Shipping_dd_ShippingAddressId',
                                name: 'ShippingAddressId',
                                fieldLabel: 'Ship Addr',
                                hiddenName: 'ShippingAddressId',
                                store: new Ext.data.Store({
                                    reader: new Ext.data.JsonReader(
                                    { id: 'ShippingAddressId' }, [{ name: 'id' }, { name: 'value'}])
                                }),
                                valueField: 'id',
                                displayField: 'value',
                                typeAhead: true,
                                mode: 'local',
                                triggerAction: 'all',
                                selectOnFocus: true,
                                forceSelection: true,
                                allowBlank: false,
                                fieldClass: 'smallFieldBold',
                                listWidth: 250
                            }),
                            {
                                id: 'caseticket_tb_ShippingAddress1',
                                name: 'ShippingAddress1',
                                fieldLabel: 'Address 1'
                            },
                            {
                                id: 'caseticket_tb_ShippingAddress2',
                                name: 'ShippingAddress2',
                                fieldLabel: 'Address 2'
                            },
                            {
                                id: 'caseticket_tb_ShippingCity',
                                name: 'ShippingCity',
                                fieldLabel: 'City'
                            }
                    ]
                },{
                    layout:'column',
                    items: [{
                        layout: 'form',
                        columnWidth: .5,
                        defaultType: 'textfield', 
                        labelWidth: 55,
                        defaults: { itemCls: 'smallLabel',
                                    anchor: '100%',
                                    fieldClass: 'smallField'},                    
                        items: [
                            {
                                id: 'caseticket_tb_ShippingState',
                                name: 'ShippingState',
                                fieldLabel: 'State',
                                allowBlank:false
                            }
                        ]
                    }  <== SPACE ABOUT THE SIZE OF 2 FULL ROWS IS SEEN HERE ON RENDERED FORM
                    ,{
                        layout: 'form',
                        columnWidth: .5,
                        defaultType: 'textfield', 
                        labelWidth: 55,
                        defaults: { itemCls: 'smallLabel',
                                    anchor: '100%',
                                    fieldClass: 'smallField'},                    
                        items: [
                            {
                                id: 'caseticket_tb_ShippingZip',
                                name: 'ShippingZip',
                                fieldLabel: 'Zip',
                                itemCls: 'smallLabelAlignRight'
                            }
                        ]
                    }]
                
                }
                ]
            });    
    
            return form;           
            
        }
    Any clue what is going on here? Am I doing this wrong?

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    5
    Bucs is on a distinguished road

      0  

    Default


    If you would spend less time berating and chastising EVERY single person whose post you answer and more time giving quality answers in a PROFESSIONAL manner...then maybe more people would understand what they are doing wrong. As it stands, YOU are the reason that I hate to post anything to this forum. If this were my company, I would ban you from answering any post whatsoever regardless of your knowledge as all you do is cast a negative light on the many people in this forum who anwser questions in a positive, constructive manner.

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

      0  

    Default


    Fine. Don't get helped. No skin.

  4. #4
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Quote Originally Posted by Bucs View Post
    If you would spend less time berating and chastising EVERY single person whose post you answer and more time giving quality answers in a PROFESSIONAL manner...then maybe more people would understand what they are doing wrong. As it stands, YOU are the reason that I hate to post anything to this forum. If this were my company, I would ban you from answering any post whatsoever regardless of your knowledge as all you do is cast a negative light on the many people in this forum who anwser questions in a positive, constructive manner.

    Woah - what did i miss? Kidding- --- do not tell me please.

    tip 1: your first issue is that you're using the fit layout with multiple children.

  5. #5
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Next, if you're instantiating an instance of a class, no need to specify its XType

  6. #6
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Frame is set to false by default, no need to set it to false.

  7. #7
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    to cleanup the layout a little, add 'border: false' to alot of the containers.

    Also, to speed things up, instead of using a Panel, use the Container (xtype:'container')

  8. #8
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    5
    Bucs is on a distinguished road

      0  

    Default


    Thanks Jay, your responses are ALWAYS welcomed. It was a typical Animal "helpful" response, that I see he has removed.

    Yes, removing the layout fit in the outer container fixed the issue. The rest of that stuff was simply junk that I was frantically trying out in an attempt to eliminate the weird space that was showing up. I should have cleaned it up prior to posting the question.

    In regards to the container vs the panel, where exactly are you saying that should be placed?

    Thanks again

  9. #9
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    The default xtype for any Container is "panel", so in the following code block:

    Code:
    {
                        layout: 'form',
                        columnWidth: .5,
                        defaultType: 'textfield', 
                        labelWidth: 55,
                        defaults: { itemCls: 'smallLabel',
                                    anchor: '100%',
                                    fieldClass: 'smallField'},                    
                        items: [
                            {
                                id: 'caseticket_tb_ShippingState',
                                name: 'ShippingState',
                                fieldLabel: 'State',
                                allowBlank:false
                            }
                        ]
                    }  <== SPACE ABOUT THE SIZE OF 2 FULL ROWS IS SEEN HERE ON RENDERED FORM
                    ,{
                        layout: 'form',
                        columnWidth: .5,
                        defaultType: 'textfield', 
                        labelWidth: 55,
                        defaults: { itemCls: 'smallLabel',
                                    anchor: '100%',
                                    fieldClass: 'smallField'},                    
                        items: [
                            {
                                id: 'caseticket_tb_ShippingZip',
                                name: 'ShippingZip',
                                fieldLabel: 'Zip',
                                itemCls: 'smallLabelAlignRight'
                            }
                        ]
                    }
    two panels are being created, which is wasteful. set their 'xtype' to 'container'. If you're using an older 2.x branch, you'll need to set the container's autoEl property to an empty obj: {}.

    The reason we suggest to use a container instead of a panel is because panel has a lot of baggage that is not needed when a vanilla container can do the trick

  10. #10
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    5
    Bucs is on a distinguished road

      0  

    Default


    Thanks Jay. So then is the following correct according to your recommendations? In complex forms, you are going to have nested layers...no way around it, so should you ALWAYS try to set container panels xtype to 'container'? When do you NOT need to do this? For instance, in the below form panel, by setting the form's xtype to 'container', am I going to lose formpanel processing methods like loadRecord() and such because I 'dumbed down' the panel to a container? thx again...

    Code:
            var form = new Ext.FormPanel({
                id: 'formShippingInfo',
                title: 'Shipping',
                border: false,
                bodyStyle: 'padding:5px 5px 5px 5px; ',
                labelWidth: 55,
                items: [
                {
                    layout: 'form',
                    xtype: 'container',
                    autoEl: {},
                    defaultType: 'textfield', 
                    labelWidth: 55,
                    defaults: {itemCls: 'smallLabel',
                                anchor: '100%',
                                fieldClass: 'smallField'
                    },  
                    items: [
                        new Ext.form.ComboBox({
                            id: 'caseticket_Shipping_dd_ShippingAddressId',
                            name: 'ShippingAddressId',
                            fieldLabel: 'Ship Addr',
                            hiddenName: 'ShippingAddressId',
                            store: new Ext.data.Store({
                                reader: new Ext.data.JsonReader(
                                { id: 'ShippingAddressId' }, [{ name: 'id' }, { name: 'value'}])
                            }),
                            valueField: 'id',
                            displayField: 'value',
                            typeAhead: true,
                            mode: 'local',
                            triggerAction: 'all',
                            selectOnFocus: true,
                            forceSelection: true,
                            allowBlank: false,
                            fieldClass: 'smallFieldBold',
                            listWidth: 250
                        }),
                        {
                            id: 'caseticket_tb_ShippingAddress1',
                            name: 'ShippingAddress1',
                            fieldLabel: 'Address 1'
                        },
                        {
                            id: 'caseticket_tb_ShippingAddress2',
                            name: 'ShippingAddress2',
                            fieldLabel: 'Address 2'
                        },
                        {
                            id: 'caseticket_tb_ShippingCity',
                            name: 'ShippingCity',
                            fieldLabel: 'City'
                        }
                    ]                       
                },           
                {
                    layout:'column',
                    width: 380,
                    xtype: 'container',
                    autoEl: {},                
                    items: [{
                        layout: 'form',
                        xtype: 'container',
                        autoEl: {},
                        columnWidth: .5,
                        defaultType: 'textfield', 
                        labelWidth: 55,
                        defaults: { itemCls: 'smallLabel',
                                    anchor: '100%',
                                    fieldClass: 'smallField'},                    
                        items: [
                            {
                                id: 'caseticket_tb_ShippingState',
                                name: 'ShippingState',
                                fieldLabel: 'State',
                                allowBlank:false
                            }
                        ]
                    }
                    ,{
                        layout: 'form',
                        xtype: 'container',
                        autoEl: {},
                        columnWidth: .5,
                        defaultType: 'textfield', 
                        labelWidth: 55,                   
                        defaults: { itemCls: 'smallLabel',
                                    anchor: '100%',
                                    fieldClass: 'smallField'},                    
                        items: [
                            {
                                id: 'caseticket_tb_ShippingZip',
                                name: 'ShippingZip',
                                fieldLabel: 'Zip',
                                itemCls: 'smallLabelAlignRight',
                                labelStyle: 'text-align: right'
                            }
                        ]
                    }]
                
                }                                                
       
                
                ]
            });    
    
            return form;

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar