PDA

View Full Version : [FIXED] Wide label problem in form with vbox layout with hbox items



estesbubba
2 Mar 2011, 8:34 AM
This will be easier to show than explain. The hbox-form example works great until you put a button or other odd-sized item in it. Then the rows are out of alignment. I posted this and it was suggested to use hbox items within a vbox:

http://www.sencha.com/forum/showthread.php?125486-How-to-lay-out-this-form-the-Ext-JS-4-way

So I have this implemented and it works until a wider label causes the textfield to be too tall. I tried using labelWidth but the docs say it doesn't work with labelAlign = 'top'. Here is what it looks like.

24943

If moved my code to the hbox-form.js demo. If you copy this and run hbox-form.html you can see what's going on. If you change Confirm Email Address to Email Address, all is well again.


Ext.require([
'Ext.form.FormPanel',
'Ext.layout.container.Anchor'
]);

Ext.onReady(function() {
Ext.create('Ext.form.FormPanel', {
renderTo: Ext.getBody(),
title: 'Form Panel',
bodyStyle: 'padding:5px 5px 0',
width: 600,
height: 600,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
xtype: 'container',
layout: {
type: 'hbox',
align: 'middle'
}
},
items: [{
items: [{
xtype: 'textfield',
flex: 1,
fieldLabel: '[Voucher]',
name: 'voucher'
}, {
xtype: 'button',
flex: 1,
text: '[Apply]'
}]
}, {
items: [{
xtype: 'textfield',
flex: 1,
fieldLabel: '[First Name]',
name: 'firstName'
}, {
xtype: 'textfield',
flex: 1,
fieldLabel: '[Last Name]',
name: 'lastName'
}]
}, {
items: [{
xtype: 'textfield',
flex: 1,
fieldLabel: '[Address]',
name: 'address'
}, {
xtype: 'textfield',
flex: 1,
fieldLabel: '[Address 2]',
name: 'address2'
}]
}, {
items: [{
xtype: 'textfield',
flex: 1,
fieldLabel: '[City]',
name: 'city'
}, {
xtype: 'textfield',
flex: 1,
fieldLabel: '[State]',
name: 'state'
}]
}, {
items: [{
xtype: 'textfield',
flex: 1,
fieldLabel: '[Zip Code]',
name: 'zipCode'
}, {
xtype: 'textfield',
flex: 1,
fieldLabel: '[Plus 4]',
name: 'zipCode'
}]
}, {
items: [{
xtype: 'textfield',
flex: 1,
fieldLabel: '[Email Address]',
name: 'email'
}, {
xtype: 'textfield',
flex: 1,
labelWidth: 400,
fieldLabel: '[Confirm Email Address]',
name: 'emailConfirm'
}]
}, {
items: [{
xtype: 'textfield',
flex: 1,
fieldLabel: '[Dummy]',
name: 'city'
}, {
xtype: 'textfield',
flex: 1,
fieldLabel: '[Dummy]',
name: 'state'
}]
}],
buttons: ['->', {
text: 'Save'
}, {
text: 'Cancel'
}]
});
});

Jamie Avins
2 Mar 2011, 11:44 AM
We're looking into getting this resolved, those labels shouldn't wrap like this.

Animal
4 Mar 2011, 11:48 PM
What if you use Box layout's padding config instead of bodyStyle to give internal padding?

Animal
5 Mar 2011, 12:11 AM
I get no problems here (Apart from your lack of margins)

http://cl.ly/50W6/Screen_shot_2011-03-05_at_08.08.42.png

estesbubba
7 Mar 2011, 7:50 AM
Your screenshot must be from IE? All other browsers render like my screenshot even using PR3.

Animal
7 Mar 2011, 10:21 AM
Eeew!?

That's Chrome.

jjohnston
8 Mar 2011, 2:54 PM
This has been fixed in the latest dev code; labels are no longer allowed to wrap when calculating the auto-height for a field.