PDA

View Full Version : Field label width > field width - when labelAlign=top



zz9pa
1 Mar 2013, 10:22 AM
Example :
http://jsfiddle.net/vVxMt/3/

Hi - is it possible to stop the wrapping of a long text label associated with a shorter field ?
I want the whole label on a single line - with a small combo.
Obviously - if I make the combo wider - the label fits across - but I want the smaller field :)

(The same happens with textfields etc)



var x=Ext.create("Ext.form.Panel",
{
width:300,
height:300,
renderTo: Ext.getBody(),
defaults: {
labelAlign:'top',
labelSeparator:'',
},
items : [
{
xtype: 'combobox',
fieldLabel: "This is a very long label",
store: ["yes","no","maybe"]
},
{xtype:'textfield',
fieldLabel:"Another long label this time on a text field"
}
]
});

droessner
1 Mar 2013, 12:58 PM
You could just create two separate fields. One displayfield with the label and then then the combo/textfield/etc without a label.

slemmon
1 Mar 2013, 8:33 PM
Alternatively you could place the fields in a fieldcontainer with hbox layout and give the fieldcontainer the long fieldLabel.

http://jsfiddle.net/slemmon/vVxMt/4/



Ext.create("Ext.form.Panel", {
width:300,
height:300,
renderTo: Ext.getBody(),
defaults: {
labelAlign:'top',
labelSeparator:'',
xtype: 'fieldcontainer',
layout: 'hbox'
},
items : [{
fieldLabel: "This is a very long label",
items: [{
xtype: 'combobox',
store: ["yes","no","maybe"]
}]
}, {
fieldLabel:"Another long label this time on a text field",
items: [{
xtype:'textfield'
}]
}]
});

zz9pa
8 Mar 2013, 8:17 AM
Setting :

labelStyle: 'width:600px',

seemed to do most of the work, although I needed to add :

var width=100;
...
width: width,
listConfig: {
width: width
},


to get the dropdown to size properly...


So - something like :


{
xtype: 'combobox',
labelStyle: 'width:600px',
width: width,
listConfig: {
width: width
},
matchFieldWidth: false,
forceSelection: true,
..
};