1. #1
    Sencha User poojagarg89's Avatar
    Join Date
    Sep 2011
    Location
    Ahmedabad,India
    Posts
    213
    Vote Rating
    0
    poojagarg89 is on a distinguished road

      0  

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

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


    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
                             ] 
            }]
        });

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

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,490
    Answers
    526
    Vote Rating
    283
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


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

  4. #3
    Sencha User poojagarg89's Avatar
    Join Date
    Sep 2011
    Location
    Ahmedabad,India
    Posts
    213
    Vote Rating
    0
    poojagarg89 is on a distinguished road

      0  

    Default


    extjs4.0

  5. #4
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default Set the column width of items and give margin

    Set the column width of items and give margin


    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.

  6. #5
    Sencha User poojagarg89's Avatar
    Join Date
    Sep 2011
    Location
    Ahmedabad,India
    Posts
    213
    Vote Rating
    0
    poojagarg89 is on a distinguished road

      0  

    Default


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

  7. #6
    Sencha User poojagarg89's Avatar
    Join Date
    Sep 2011
    Location
    Ahmedabad,India
    Posts
    213
    Vote Rating
    0
    poojagarg89 is on a distinguished road

      0  

    Default


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

  8. #7
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default Try by using this code

    Try by using this code


    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.

  9. #8
    Sencha User poojagarg89's Avatar
    Join Date
    Sep 2011
    Location
    Ahmedabad,India
    Posts
    213
    Vote Rating
    0
    poojagarg89 is on a distinguished road

      0  

    Default


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

Thread Participants: 2