PDA

View Full Version : FormPanel with hbox layout does not display field labels (in ExtJS version 3.1.0)



ozgur
7 Apr 2010, 3:41 AM
I want that my ExtJS Form renders elements horizontally ( -> hbox layout )

My problem is that the field labels does not appear when hbox layout is applied to my Form.

Is the hbox the best way to render form elements in row?

My code is :


new Ext.FormPanel({
renderTo:'parent',
title:'Management',
layout: 'hbox',
frame: true,
height: 200,
width: 600,
labelAlign : 'top',
items: [
new Ext.form.TextField({
fieldLabel:'First Name',
name: 'first_name',
msgTarget:'qtip'
}),
new Ext.form.TextField({
fieldLabel:'Last Name',
name: 'last_name',
msgTarget:'qtip'
}),
new Ext.form.TextField({
fieldLabel:'Address',
name: 'address',
msgTarget:'qtip'
}),
new Ext.form.TextField({
fieldLabel:'Phone Number',
name: 'phone_number',
msgTarget:'qtip'
})
]
});A screen shot is attached to my post.

Thanks for help.

Ozgür.

asmussen
7 Apr 2010, 1:00 PM
I just started learning Javascript/Ext JS last week, so I don't know if this is the correct way to do this or not, but I got around this same problem by placing my elements within form layouts contained by the hbox layout instead of directly inside the hbox layout. Something along the lines of this:



{
layout: 'hbox',
border: false,
items: [{
layout: 'form',
border: false,
items: [{
xtype: 'checkbox',
fieldLabel: 'field1',
}]
},
{
layout: 'form',
border: false,
items: [{
xtype: 'checkbox',
fieldLabel: 'field2',
}]
}]
}

jwcraig
26 Apr 2010, 10:43 AM
I just started learning Javascript/Ext JS last week, so I don't know if this is the correct way to do this or not, but I got around this same problem by placing my elements within form layouts contained by the hbox layout instead of directly inside the hbox layout. Something along the lines of this:



{
layout: 'hbox',
border: false,
items: [{
layout: 'form',
border: false,
items: [{
xtype: 'checkbox',
fieldLabel: 'field1',
}]
},
{
layout: 'form',
border: false,
items: [{
xtype: 'checkbox',
fieldLabel: 'field2',
}]
}]
}


If you do this, you lose the flex on the fields (textbox and textfield). Is there a way to retain the flex on fields in a nested layout?

gigel
14 Oct 2011, 10:21 AM
If you do this, you lose the flex on the fields (textbox and textfield). Is there a way to retain the flex on fields in a nested layout?
Panels can flex, so I think it is a good solution:


{
layout: 'hbox',
border: false,
defaults: {flex: 1, layout: 'form', border: false},
items: [{
items: [{
xtype: 'checkbox',
fieldLabel: 'field1',
}]
},
{
items: [{
xtype: 'checkbox',
fieldLabel: 'field2',
}]
}]
}