Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ExtJS - Lining up form elements in FormPanel column layout

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: Screenshot

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: ' ',  
}
like image 711
dmackerman Avatar asked Jun 13 '11 15:06

dmackerman


2 Answers

by default empty labels are hidden (the field is pushed to the left). instead of putting '&nbsp ;' label ...

fieldLabel: ' ',
labelSeparator: ' ', 

you can do it properly:

hideEmptyLabel : false

witch will align your filed component even if no label is specified.

like image 158
d.raev Avatar answered Nov 14 '22 04:11

d.raev


EDIT: This worked:

           {
                xtype: 'component',
                fieldLabel: ' ',
                labelSeparator: ' ',  
            }
like image 22
dmackerman Avatar answered Nov 14 '22 03:11

dmackerman