In column layout the fields not having space btw them

**poojagarg89** · 8 Nov 2011 9:08 PM

I have a form where I have items within column layout but the prob. is that the fields are not having space btw them
add form.jpg
Here, the Labels after the text fields is not having space btw the textfields and the labels
any idea Y? I have tried increasing the width of the window but no change any other thing that I need to add???
the code is :

Code:

function showAddForm_Grid1(){
    add_form = new Ext.FormPanel({
    //    title: 'Add BulletIn Users',
        border: false,
        modal: true,
        frame: true,
        padding: 20,
        autoScroll: true,
        
        monitorValid: true,
        fieldDefaults: {
                   // labelAlign: 'top',
                   msgTarget: 'under',
                    labelWidth: 75
                },
                defaults: {
                   margins: '0 0 10 0',
                    anchor: '99%'
                },
        items: [{
            xtype: 'fieldset',
            title: 'User',
            labelStyle: 'font-weight:bold;padding:0',
            layout: 'column',
             columnWidth : '1',
            defaultType: 'textfield',
            
            fieldDefaults: {
                        labelAlign: 'left'
                    },     
            items: [{
                flex: 1,
                id: 'user_name',
                fieldLabel: '<font color="red"> * </font>Username',
                name: 'User Name',
                //enableKeyEvents: true,
                allowBlank:false,
                blankText:"This field is required",
                 msgTarget:"under",
                 width:240,
                margins: '0 0 0 10',
                vtype: 'alpha'
                
            },{    
                flex:1,
                id: 'password',
                //xtype: 'password',
                fieldLabel: '<font color="red"> * </font>Password',
                inputType:'password',
                name: 'Password',
                allowBlank:false,
                blankText:"This field is required",
                 msgTarget:"under",
                 width:240,
                margins: '0 0 0 10'
                //disabledDays: [0,1,2,3,4],    
                //value: last_name
            }]   
        },{
            xtype: 'fieldset',
            
                            
            labelStyle: 'font-weight:bold;padding:0',
            layout: 'anchor',
            title: 'Personal Details',
            items: [{
                xtype: 'container',
            labelWidth : 90,
            layout: 'column',
             columnWidth : '1',
            defaultType: 'textfield',
            fieldDefaults: {
                        labelAlign: 'left'
                    },    
            items: [{    
                flex: 1,
                fieldLabel: 'First Name',
                name: 'first_name',
                id: 'first_name',
                allowBlank:false,
                blankText:"This field is required",
                 msgTarget:"under",
                 width:240,
                margins: '0 0 0 10',
                vtype: 'alpha'
                
            },{    
                flex:1,
                fieldLabel: 'Last Name',
                name: 'last_name',
                id: 'last_name',
                allowBlank:false,
                blankText:"This field is required",
                 msgTarget:"under",
                 width:240,
                margins: '0 0 0 10'
                
                }]
            },{ 
                xtype: 'container',
                    layout: 'column',
                     columnWidth : '1',
                    labelWidth : 90,
                    defaultType: 'textfield',
                   
                    items: [{
                flex: 1,
                
                xtype: 'textfield',
                fieldLabel: 'Address 1',
                name: 'address_1',
                id: 'address_1',
                allowBlank: false,
                width:240,
                margins: '0 0 0 10'
//                msgTarget: 'under'
            },{
                flex: 1,
                xtype: 'textfield',
                fieldLabel: 'Address 2',
                name: 'address_2',
                id: 'address_2',
//                allowBlank: false,
//                msgTarget: 'under',
                vtype: 'alpha',
                width:240,
                margins: '0 0 0 10'
            }]
        },{
            xtype: 'container',
           labelWidth : 90,
            columnWidth : '1',
            //labelStyle: 'font-weight:bold;padding:0',
            layout: 'column',
            defaultType: 'textfield',
                
            items: [{
                flex: 1,
                xtype: 'textfield',
                fieldLabel: 'city',
                name: 'city',
                id: 'city',
                allowBlank:false,
                blankText:"This field is required",
                 msgTarget:"under",
                 width:240,
                margins: '0 0 0 10'
            },{
                flex: 1,
                xtype: 'textfield',
                fieldLabel: 'state',
                name: 'state',
                id: 'state',
                allowBlank:false,
                blankText:"This field is required",
                 msgTarget:"under",
                 width:240,
                margins: '0 0 0 10'
            
            }]
            },{
                xtype: 'container',
                    layout: 'column',
                     columnWidth : '1',
                    defaultType: 'textfield',
                   labelWidth : 90,
                    items: [{
                    flex: 1,
                xtype: 'textfield',
                fieldLabel: 'Pin Number',
                name: 'pin_number',
                id: 'pin_number',
                vtype: 'number',
                allowBlank:false,
                msgTarget:'under',
                width:240,
                margins: '0 0 0 10'
                //margins: '0 0 0 10'
        },{
            flex: 1,
            xtype: 'textfield',
            fieldLabel: 'Fax ',
            name: 'fax',
            id: 'fax',
            vtype: 'number',
            allowBlank:false,
            msgTarget:'under',
            width:240,
            margins: '0 0 0 10'
            }]
        },{
            xtype: 'container',
            layout: 'column',
             columnWidth : '1',
            labelWidth : 90,
            defaultType: 'textfield',
            fieldDefaults: {
                        labelAlign: 'left'
                    },     
            items: [{flex: 1,
                xtype: 'textfield',
                fieldLabel: 'Phn Number',
                name: 'phone_number',
                id: 'phone_number',
                width:240,
                //allowNegative:false,
                allowBlank:false,
                vtype: 'mobile',
                msgTarget:'under',
                margins: '0 0 0 10'
                
            },{
                flex: 1,
                xtype: 'textfield',
                fieldLabel: 'Mob Number',
                name: 'mobile_number',
                id: 'mobile_number',
                allowBlank:false,
                vtype: 'mobile',
                msgTarget:'under',
                width:240,
                margins: '0 0 0 10'
            }]},{
            //flex: 1,
            id: 'email',
            xtype: 'textfield',
            fieldLabel: 'Email Id',
            name: 'email',
            vtype:'email',
            allowBlank:false,
            msgTarget:'under',
            width:240,
            margins: '0 0 0 10'
            },
                         role_id_grid
                         ] 
        }]
    });

netemp

I used the following code:

Code:

defaults: {
	labelAlign: 'left',
	columnWidth:0.5,
	margin:'0px 0px 0px 20px'
}

in place of

Code:

fieldDefaults: {
                labelAlign: 'left'
            },

and I could see the space between the fields.

Try by replacing at your end and it should work.

**skirtle** · 8 Nov 2011 9:33 PM

Please do not post help requests to the Open Discussion forum.

If you let me know which ExtJS version you're using I'll move this thread...

**poojagarg89** · 8 Nov 2011 10:23 PM

extjs4.0

**netemp** · 8 Nov 2011 11:27 PM

Pooja, as per your code, you are setting the layout of container as column and you are also giving columnWidth there itself, that is to the parent.

Rather, the columnWidth should be present in the child items.

I shall suggest you to take off flex:1 from the items, assign them columnWidth and then give left margin to the second item of your container.

Hope this helps.

**poojagarg89** · 9 Nov 2011 1:42 AM

I tried with each and every possible places where I can keep columnWidth but its not helping me out

**poojagarg89** · 9 Nov 2011 1:56 AM

I got it now as I used
&nbsp in fieldLabels of the 2nd column
its giving space btw textfields and fieldLabels

**netemp** · 9 Nov 2011 2:06 AM

I used the following code:

Code:

defaults: {
	labelAlign: 'left',
	columnWidth:0.5,
	margin:'0px 0px 0px 20px'
}

in place of

Code:

fieldDefaults: {
                labelAlign: 'left'
            },

and I could see the space between the fields.

Try by replacing at your end and it should work.

**poojagarg89** · 9 Nov 2011 2:29 AM

hey it worked
I replaced fieldDefaults with the code given by u
its working perfectly
Thanx a lot

In column layout the fields not having space btw them

Thread Tools

Search Thread

Display

Answered: In column layout the fields not having space btw them

Answered: In column layout the fields not having space btw them

Set the column width of items and give margin

Set the column width of items and give margin

Try by using this code

Try by using this code