PDA

View Full Version : Baffled by forms layout. Fields not displaying labels.



dnedrow
26 Jun 2015, 6:16 AM
I am putting together what should be a pretty simple dialog that has two displayfields, two timefields, and a button.

In order to get the layout looking close to what I want, I've embedded containers in the FormPanel. However, when the page is rendered none of the fieldsLabels are shown in the dialog. I'm including the code and, hopefully, a screenshot.



Ext.onReady(function() {

Ext.BLANK_IMAGE_URL = "/ext/resources/images/default/s.gif";

Ext.Ajax.timeout = 60000;

Ext.QuickTips.init();

Ext.get('loading').remove();

var form = new Ext.form.FormPanel({
applyTo: 'wee-panel-div',
bodyStyle: {
background: '#ffffff',
padding: '5px'
},
frame: true,
id: 'wee-record-acm-form',
monitorValid: true,
style: 'margin: 20px auto;',
title: 'After-hours Time Window',
width: 650,
height: 400,
hidelabels: 'false',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
items: [{
xtype: 'container',
flex: 1,
id: 'upperContainer',
layout: 'vbox',
layoutConfig: {
align: 'stretch',
pack: 'center'
},
items: [{
xtype: 'displayfield',
id: 'currentStart',
fieldLabel: 'Current after-hours start time',
labelAlign: 'right',
labelWidth: 175,
value: '00:00'
}, {
xtype: 'displayfield',
id: 'currentStop',
fieldLabel: 'Current after-hours stop time',
labelAlign: 'right',
labelWidth: 175,
value: '00:00'
}]
}, {
xtype: 'container',
flex: 1,
id: 'lowerContainer',
// width: 100,
layout: 'hbox',
layouConfig: {
align: 'stretch'
},
items: [{
xtype: 'container',
flex: 1,
height: 50,
width: 100,
layout: 'vbox',
layoutConfig: {
align: 'stretch',
pack: 'center'
},
items: [{
xtype: 'timefield',
id: 'newStartTime',
width: 216,
fieldLabel: 'New after-hours start time',
labelAlign: 'right',
labelWidth: 150,
format: 'H:i',
submitFormat: 'Hi'
}, {
xtype: 'timefield',
id: 'newStopTime',
width: 216,
fieldLabel: 'New after-hours stop time',
labelAlign: 'right',
labelWidth: 150,
format: 'H:i',
submitFormat: 'Hi'
}, {
xtype: 'label',
flex: 1,
text: 'Time must be entered in 24-hour format.'
}]
}, {
xtype: 'container',
flex: 1,
autoEl: 'div',
layout: 'hbox',
layoutConfig: {
align: 'middle',
pack: 'center'
},
items: [{
xtype: 'button',
id: 'submitButton',
text: 'Submit'
}]
}]
}]
});

});


52744

aw1zard2
26 Jun 2015, 7:06 AM
You changed the layout to vbox only the form layout will display the labels correctly.

Try wrapping a displayfield with a container using the layout: 'form' and the label should show up.