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