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:

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 '&nbsp ;' 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: ' ',  
            }

Your solution will work but it is not the ExtJS(/HTML tables) way.

You are using a column layout so you can use colspan: 2 on the banner name field which results in the same output.
You also can use rowspan to have your field cover two rows :)

None of the above seems to have worked for me. I had to explicitly set the height of the empy cell.

xtype: 'label',
text: ' ',
flex:1,
height:22

Disappointing to say the least.

However this only works with vBox layout. If I use anchor layout then nothing works :(