CODEWITHSUNDEEP
formslayoutextjs
dmackerman
dmackerman

Reputation: 2966

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

Upvotes: 11

Views: 23957

Answers (4)

Oliver Watkins
Oliver Watkins

Reputation: 13539

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

Upvotes: 1

d.raev
d.raev

Reputation: 9556

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.

Upvotes: 8

A1rPun
A1rPun

Reputation: 16857

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

Upvotes: 3

dmackerman
dmackerman

Reputation: 2966

EDIT: This worked:

           {
                xtype: 'component',
                fieldLabel: ' ',
                labelSeparator: ' ',  
            }

Upvotes: 7

Related Questions