PDA

View Full Version : Placing labels above fields with FormLayout?



ajmas
22 Dec 2010, 7:30 AM
I have a FormPanel (Ext.form.FormPanel) that contains a number of fields and sub panels (Ext.Panel). Each sub panel in turn has fields, but is uses the FormLayout. In the base panel I am able to get the fields to have their labels on top by using the "labelAlign: 'top'", but this does not work for the sub panels. The labels are defined as parts of the 'fieldLabel' attribute of the fields.

Can anyone suggest an approach to getting the expected presentation?

The code for the sub panel looks as follows:



Ext.ns('test.panel');

test.panel,MyPanel = Ext.extend(Ext.Panel, {

constructor: function ( config ) {

config = config || {};

config = Ext.apply({
title: 'Publication Details',
layout: 'form',
defaults: {
hideLabels: false,
labelAlign: 'top'
},
layoutConfig: {
labelAlign: 'top'
},
items: [new Ext.ux.form.DateTime({
hideLabels: false,
fieldLabel: 'When',
name: 'publicationDate',
labelAlign: 'top'
})],
tools: [
{id:'help'}
]
}, config );

test.panel.MyPanel.superclass.constructor.call(this, config);

}
});

ajmas
22 Dec 2010, 10:40 AM
Turns out that I should be placing the "labelAlign: 'top'" at the panel level



Ext.ns('test.panel');

test.panel,MyPanel = Ext.extend(Ext.Panel, {

constructor: function ( config ) {

config = config || {};

config = Ext.apply({
title: 'Publication Details',
layout: 'form',
labelAlign: 'top',
defaults: {
hideLabels: false
},
items: [new Ext.ux.form.DateTime({
hideLabels: false,
fieldLabel: 'When',
name: 'publicationDate'
})],
tools: [
{id:'help'}
]
}, config );

test.panel.MyPanel.superclass.constructor.call(this, config);

}
});