PDA

View Full Version : An alternative to CompositeField - Grouping fields in a single row easily



oaugustus
12 Mar 2010, 7:52 AM
Hi for all,

I think that CompositeField in Ext 3.2 is a great component. But sometimes, and I want to say, frequently, we need grouping any fields, without a strong relation between self (like firstname and lastname), in a single row, in this case, group the labels is not a good thing.
I build a FieldGroup component, to solve this problem, it use is very simple:



var a = new Ext.form.FormPanel({
width: 500,
title: 'FieldGroup',
autoHeight: true,
bodyStyle: 'padding:8px',
items:[
{
xtype: 'fieldgroup',
labelWidth: 30,
items:[
{
xtype: 'textfield',
fieldLabel: 'Nick',
flex: 1
},
{
xtype: 'textfield',
fieldLabel: 'Fullname',
flex: 2,
labelWidth: 55
},
{
xtype: 'numberfield',
fieldLabel: 'Age',
flex: 1
}
]
},
{
xtype: 'fieldgroup',
labelWidth: 35,
items:[
{
xtype: 'textfield',
fieldLabel: 'Best friend name',
flex: 2,
labelWidth: 100
},
{
xtype: 'textfield',
fieldLabel: 'Movie',
flex: 1
}
]
}
]
});
The result is like the attached image.

Suggestions and feedbacks are welcome. There are a bug in version 3.1.x of Ext because hbox bug with fields, to solve this problem is necessary to define the textfield height, for example:


{
xtype: 'textfield',
fieldLabel: 'Movie',
height: 30,
flex: 1
}

rajbhalani
5 Apr 2010, 8:07 AM
Is this working in Fire Fox ? It seems there could be bug.

Raj

oaugustus
6 Apr 2010, 8:53 AM
Hi Raj,

I have tested in FF 3.6.x and works fine. What Ext version you use?

jmariani
11 May 2010, 6:41 AM
Hi, Otavio.

Nice control, I'm using it. But I see this bug:

I'm using the red exclamation icon on the left of the field to show there's a validation error. When the validation fails and the icon shows up, a scroll bar appears at the bottom of the field.

Any help?

oaugustus
12 May 2010, 7:17 PM
Hi jmariani,

I will check and fix this bug. Thanks for reporting.

Cheers.

danutungureanu.dgs
28 Oct 2010, 2:30 PM
Hi,

Great extension!

I always use this extension, but now I came across a case where I need to use labelAlign: 'top'.
The extension is still working except that it does not calculate the form field width as it should.

The example is attached.

Do you have a fix for this?
Thank you.