PDA

View Full Version : [CLOSED] Form Layout



bob4ever
8 Apr 2014, 5:35 AM
I tried to use the new form layout, but it seems to not work...

When i use the following code, the image at top and the button at bottom will use the same width like the labels. Is this behavior intended?

In the documentation it's written that the labelWidth at the items aren't be used, but the if i remove the comment at the "System language" field the line break is away.



Ext.create('Ext.window.Window', {
width: 400,
layout: 'fit',
autoShow: true,

items: [{
xtype: 'panel',
layout: {
type: 'form',
labelWidth: 150
},
items: [{
xtype: 'image',
src: 'http://docs.sencha.com/extjs/4.2.1/resources/images/logo-screen-noglow.png',
width: 360,
height: 90
},{
xtype:'textfield',
fieldLabel: 'User'
},{
xtype: 'textfield',
fieldLabel: 'System Language',
//labelWidth: 150 //this will remove the line break
},{
xtype: 'checkbox',
fieldLabel: 'Remember me',
checked: true
},{
xtype: 'button',
text: 'Login',
width: '100%'
}]
}]
});

evant
8 Apr 2014, 9:17 AM
1) Form layout only works with things that use the Labelable mixin, so you can't have the image and the button (unless you wrap them in a field container).

2) Since you've specified a labelWidth in the layout, then it will forcibly set everything to that width. However the main advantage of the form layout is that it will auto-measure the labels for you and make every label as large as the largest one. The labels on each field are ignored when using the form layout. That's why you see it not wrap when you remove the explicit width configured on the layout.