Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Two textfields in a row

  1. #1

    Default Two textfields in a row

    Dear Forum,

    how do I add a row with *two* textfields into a fieldset?

    I mean something like:

    Code:
    Label 1: |________________|
    Label 2: |________________|
    Label 3: |__| Label 4: |__|
    PS: Now that I think about it, it doesn't have to be a fieldset, I guess...

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    fieldset with a column layout

  3. #3

    Default

    Hi,
    thanks for the reply!
    However, while the input fields are ok now, the spacing between them and the labels are gone.

    It looks like this now:
    Code:
    [____________]
    [____________]
    [_____][_____]
    Here's the code:
    Code:
        var fieldset = new Ext.form.FieldSet({
            autoHeight: true,
            border: false,
            defaultType: 'textfield',
            layout: 'column',
            items: [{
                columnWidth: 1,
                fieldLabel: 'Label 1',
                name: 'field1',
            }, {
                columnWidth: 1,
                fieldLabel: 'Label 2',
                name: 'field2'
            }, {
                columnWidth: 0.5,
                fieldLabel: 'Label 3',
                name: 'field3'
            }, {
                columnWidth: 0.5,
                fieldLabel: 'Label 4',
                name: 'field4'
            }],
            renderTo: body
        });
    How do I put the labels and spacing back?

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    add layout : 'form' to each of the items.

  5. #5

    Default

    Like this?

    Code:
        var fieldset = new Ext.form.FieldSet({
            autoHeight: true,
            border: false,
            defaultType: 'textfield',
            layout: 'column',
            items: [{
                layout: 'form',
                columnWidth: 1,
                fieldLabel: 'Label 1',
                name: 'field1',
            }, {
                layout: 'form',
                columnWidth: 1,
                fieldLabel: 'Label 2',
                name: 'field2'
            }, {
                layout: 'form',
                columnWidth: 0.5,
                fieldLabel: 'Label 3',
                name: 'field3'
            }, {
                layout: 'form',
                columnWidth: 0.5,
                fieldLabel: 'Label 4',
                name: 'field4'
            }],
            renderTo: body
        });
    Unfortunately it looks the same...

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    sorry, change defaultType to panel

  7. #7

    Default

    Code:
        var fieldset = new Ext.form.FieldSet({
            autoHeight: true,
            border: false,
            defaultType: 'panel',
            layout: 'column',
            items: [{
                layout: 'form',
                columnWidth: 1,
                fieldLabel: 'Label 1',
                name: 'field1',
            }, {
                layout: 'form',
                columnWidth: 1,
                fieldLabel: 'Label 2',
                name: 'field2'
            }, {
                layout: 'form',
                columnWidth: 0.5,
                fieldLabel: 'Label 3',
                name: 'field3'
            }, {
                layout: 'form',
                columnWidth: 0.5,
                fieldLabel: 'Label 4',
                name: 'field4'
            }],
    //        renderTo: body
        });
    This doesn't render anything...

    Btw, I'm putting this into: (Sorry, if that changes anything for my question..)
    Code:
        var formpanel = new Ext.form.FormPanel({
            frame: true,
            width: 400,
            items: fieldset,
            autoScroll: true,
            buttons: [{text: 'OK'}]
            renderTo: body
        });

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    Let me fix this for you

  9. #9
    Sencha User
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    Code:
    var fieldset = new Ext.form.FieldSet({
    	autoHeight   : true,
    	border       : false,
    	defaultType  : 'panel',
    	items        : [
    		{
    			xtype       : 'textfield',
    			fieldLabel  : 'Label 1',
    			width       : 500,
    			name        : 'field1',
    		},
    		{
    			xtype       : 'textfield',
    			fieldLabel  : 'Label 2',
    			width       : 500,
    			name        : 'field2',
    		},
    
    		{
    			layout      : 'column',
    			border      : false,
    			width       : 500,
    			items : [
    				{
    					xtype       : 'panel',
    					layout      : 'form',
    					columnWidth : .5,
    					items       : [
    						{
    							xtype       : 'textfield',
    							fieldLabel  : 'Label 3',
    							name        : 'field3'
    						}
    					]
    				},
    				{
    					xtype       : 'panel',
    					layout      : 'form',
    					columnWidth : .5,
    					items       : [
    						{
    							xtype       : 'textfield',
    							fieldLabel  : 'Label 4',
    							name        : 'field4'
    						}
    					]
    				}
    					
    			]
    		}
    		
    	],
    	renderTo : Ext.getBody()
    });

  10. #10

    Default

    Thank you very much, that's great!!

    I needed to add a "width" here and there, so it aligns nicely:

    Code:
    var fieldset = new Ext.form.FieldSet({
        autoHeight   : true,
        border       : false,
        defaultType  : 'panel',
        labelWidth   : 50,
        items        : [
            {
                xtype       : 'textfield',
                fieldLabel  : 'Label 1',
                name        : 'field1',
                width       : 300
            },
            {
                xtype       : 'textfield',
                fieldLabel  : 'Label 2',
                name        : 'field2',
                width       : 300
            },
    
            {
                layout      : 'column',
                border      : false,
                width       : 380,
                items : [
                    {
                        xtype       : 'panel',
                        layout      : 'form',
                        columnWidth : .5,
                        items       : [
                            {
                                xtype       : 'textfield',
                                fieldLabel  : 'Label 3',
                                name        : 'field3',
                                width       : 110
                            }
                        ]
                    },
                    {
                        xtype       : 'panel',
                        layout      : 'form',
                        columnWidth : .5,
                        items       : [
                            {
                                xtype       : 'textfield',
                                fieldLabel  : 'Label 4',
                                name        : 'field4',
                                width       : 110
                            }
                        ]
                    }
                        
                ]
            }
            
        ]
            renderTo: body
        });
    The last thing I would like to ask is more of a detail:
    in Safari, a selected field has this nice "glowing" around it. However, something cuts away the upper part of the last fields' glow, please see the attachment..

    I probably could increase the spacing between the fields but is it possible to leave the spacing as it is and still have the glow ok?
    Attached Images Attached Images

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •