PDA

View Full Version : [Ext 3.1] formpanel side-by-side fields



austin1030
5 Feb 2010, 12:48 PM
I'm trying to position datefield and combo box side by side with label being on the top.



var post = new Ext.FormPanel({
renderTo: 'post',
width: 700,
labelWidth : 80,
labelAlign : 'top',
frame : true,
monitorValid : true,
items: [{
layout: 'column',
border: false,
anchor: '80%',
items:[{
columnWidth:.35,
layout: 'form',
height: 55,
border: false,
items: [{
xtype: 'datefield',
fieldLabel: 'Event Date',
name: 'sdate',
id: 'sdate',
vtype: 'daterange',
endDateField: 'edate',
emptyText: 'mm/dd/yyyy',
editable: true,
forceSelection: false,
selectOnFocus: false,
anchor: '99%'
}]
},{
columnWidth:.15,
layout: 'form',
height: 55,
border: false,
items: [{
xtype: 'combo',
fieldLabel: 'Start Time',
hideLabel: true,
name : 'stm',
id: 'stm',
store: getTM,
mode: 'local',
lazyRender: true,
triggerAction: 'all',
displayField: 'tm',
valueField: 'tm',
emptyText: '---',
listClass: 'x-combo-list-small',
editable: false,
forceSelection: true,
selectOnFocus: true,
anchor: '100%'
}]
},{
columnWidth:.25,
layout: 'form',
height: 55,
border: false,
items: [{
xtype: 'combo',
fieldLabel: 'To',
name: 'etm',
id: 'etm',
store: getTM,
mode: 'local',
lazyRender: true,
triggerAction: 'all',
displayField: 'tm',
valueField: 'tm',
emptyText: '---',
listClass: 'x-combo-list-small',
editable: false,
forceSelection: true,
selectOnFocus: true,
anchor: '99%'
}]
},{
columnWidth:.25,
layout: 'form',
height: 55,
border: false,
items: [{
xtype: 'datefield',
hideLabel: true,
name: 'edate',
id: 'edate',
vtype: 'daterange',
startDateField: 'sdate',
emptyText: 'mm/dd/yyyy',
editable: true,
forceSelection: false,
selectOnFocus: false,
anchor: '99%'
}]
}]
}]

});


Here is what is going...trying lay all fields side by side
http://austin.umd.edu/haiti/images/sources/side-by-side-fields.jpg

choykawairicky
5 Feb 2010, 5:49 PM
simply remove hideLabel: true


hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a fieldLabel the space will still be reserved so that the field will line up with other fields that do have labels. Setting this to true will cause the field to not reserve that space.

austin1030
6 Feb 2010, 12:22 PM
simply remove hideLabel: true


hideLabel : Boolean
true to completely hide the label element (label and separator). Defaults to false. By default, even if you do not specify a fieldLabel the space will still be reserved so that the field will line up with other fields that do have labels. Setting this to true will cause the field to not reserve that space.

Right, what I realized is that I have to set following code to keep the space for the label while eliminating the label from the field box.




filedLabel: '',
labelSeperator: '',
hideLabel: false



thanks