Mixing column layouts on form

[Bucs]

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:

       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:

    , 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?

[Bucs]

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.

[Animal]

Fine. Don't get helped. No skin.

[jay@moduscreate.com]

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.

[jay@moduscreate.com]

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

[jay@moduscreate.com]

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

[jay@moduscreate.com]

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')

[Bucs]

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

[jay@moduscreate.com]

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

{
                    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

[Bucs]

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...

        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;