1. #1
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    122
    Vote Rating
    0
    andynuss is on a distinguished road

      0  

    Default trying to anchor form labels and fields vertically

    trying to anchor form labels and fields vertically


    Hi,

    I have a form with 2 labels and 2 fields, a textarea and a combo. I want to have the label on top of the textarea, and the other label on top of the combo. I want the textarea to be 100% width and the combo about 70% width. But I want the combo to be flush left, underneath its label, and this isn't happening with the following code:

    Code:
        var form = new Ext.form.FormPanel({
            baseCls : 'x-plain',
            labelWidth : -4,
            layout : 'form',
            items: [{
                xtype : 'label',
                text : 'Content:'
            },{
                xtype : 'textarea',
                name : 'content',
                anchor : '100% -70',
            }, {
                anchor : '100% -70',
                xtype : 'label',
                text : 'Style:'
            }, {
                anchor : '70% -40',
                xtype : 'combo',
            }]
        });
    
        var win = new Ext.Window({
            draggable : false,
            resizable : false,
            title : 'Create popup',
            width : 500,
            height : 300,
            minWidth : 300,
            minHeight : 200,
            layout : 'fit',
            plain : true,
            bodyStyle : 'padding:5px;',
            buttonAlign : 'right',
            items : form,
            buttons: [{
                text : 'Save'
            },{
                text : 'Cancel'
            }],
        });
    
        win.show();
    I also tried absolute and couldn't do any better, though I think that absolute layout might be a better idea.

    Andy

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    218
    Vote Rating
    0
    alien3d is on a distinguished road

      0  

    Default idea

    idea



    Are you want to do like this.But myself got a problem also .the label wanted to be side by side but cannot.Any idea?
    Code:
    var locationInfo = new Ext.form.FormPanel({
            labelAlign  : 'top',
    		frame       :  true,
    		title       : 'Todo Form Entry',
    		bodyStyle   : 'padding:0px 0px 0',
            border      : false,
    		items   	:	[{	layout 		: 'column',
    							items 		: [{ 
    								layout		: 'form',
    								columnWidth : 	0.5,
    								items  : [ todo_code,todo_title,todo_date]
    							},{	
    								layout		: 'form',
    								columnWidth : 	0.5,
    								items  : [asset,location,color]
    							}]
    						
    						},color_info,todo_des],
    		buttons 	: [{	text:'Save'		},
    					   { 	text : 'Cancel'	}]
    	
        });

Thread Participants: 1