I have a FormPanel with 3 columns. Each column is 33% of the FormPanel width. Looks something like this:
searchForm = new Ext.FormPanel({
frame: true,
title: 'Search Criteria',
labelAlign: 'left',
labelStyle: 'font-weight:bold;',
labelWidth: 85,
width: 900,
items: [{
layout: 'column',
items: [{ // column #1
columnWidth: .33,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Banner ID',
name: 'bannerID',
anchor: '95%',
},
new Ext.form.ComboBox({
fieldLabel: 'Advertiser',
typeAhead: true,
triggerAction: 'all',
mode: 'local',
emptyText: 'Advertiser',
store: advertiserList,
valueField: 'id',
displayField: 'name'
})] // close items for first column
}, {
columnWidth: .33,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Banner Name',
name: 'bannerName',
anchor: '95%',
},
new Ext.form.ComboBox({
fieldLabel: 'Art Type',
typeAhead: true,
triggerAction: 'all',
mode: 'local',
emptyText: 'Art Type',
store: artTypesList,
valueField: 'id',
displayField: 'name'
})] // close items for second column
}, {
columnWidth: .33,
layout: 'form',
items: [{
xtype: 'hidden'
},
new Ext.form.ComboBox({
fieldLabel: 'Art Size',
typeAhead: true,
triggerAction: 'all',
mode: 'local',
emptyText: 'Art Size',
store: artSizeList,
valueField: 'id',
displayField: 'name'
})] // close items for third column
}]
}]
}); // close searchForm FormPanel
It displayed something that looks like this:
Only problem is I want the "Art Size" field/label to be aligned on the same row as the "Advertiser" and "Art Type" fields. Is there any way to add a "blank" item, such that it forces the entry down to the correct row? Is there another approach to this that I'm missing?
Thanks!
EDIT: This worked:
{
xtype: 'component',
fieldLabel: ' ',
labelSeparator: ' ',
}
by default empty labels are hidden (the field is pushed to the left). instead of putting '  ;' label ...
fieldLabel: ' ',
labelSeparator: ' ',
you can do it properly:
hideEmptyLabel : false
witch will align your filed component even if no label is specified.
EDIT: This worked:
{
xtype: 'component',
fieldLabel: ' ',
labelSeparator: ' ',
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With