PDA

View Full Version : [SOLVED] No fieldLabel within hbox layout



ctp
7 Oct 2010, 12:21 AM
Howdy,

hbox layout provides a nice way to compose forms but in my case i cannot make the fieldlabels visible. Only the textfields are rendered side-by-side. Anyone has a hint, what's going wrong in this code snippet?


App.ComponentTestWindow = Ext.extend(Ext.Window, {
constructor: function (config) {
var config = Ext.apply(config || {}, {
id: 'loginWindow',
title: bundle.getMsg('login'),
border: false,
height: 175,
width: 350,
items: [{
xtype: 'fieldset',
defaultType: 'textfield',
items: [{
xtype: 'container',
layout: 'hbox',
layoutConfig: {
pack: 'start'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Streeet'
},{
xtype: 'textfield',
fieldLabel: 'House no.'
}]
},{
xtype: 'container',
layout: 'hbox',
layoutConfig: {
pack: 'start'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Zip code'
},{
xtype: 'textfield',
fieldLabel: 'City')
}]
}]
}]
});
App.ComponentTestWindow.superclass.constructor.call(this, config);
}
});
Ext.reg('component_test_window', App.ComponentTestWindow);

Condor
7 Oct 2010, 1:50 AM
fieldLabels are only rendered by FormLayout, so you need to nest extra containers with layout:'form' inside your hbox container.

ps. In Ext 4 this will no longer be required, because there fieldLabels are rendered by the field itself.

ctp
7 Oct 2010, 2:13 AM
Thx for the prompt reply ;-) Now its all nested within form layout.

Jaitsu
7 Oct 2010, 3:02 AM
fieldLabels are only rendered by FormLayout, so you need to nest extra containers with layout:'form' inside your hbox container.

ps. In Ext 4 this will no longer be required, because there fieldLabels are rendered by the field itself.

I am so happy to hear this, sometimes it was necessary to add a needless container just to render a checkbox with a label