ExtJS - 在FormPanel列布局中排列表单元素

dma*_*man 11 forms layout extjs

我有一个有3列的FormPanel.每列占FormPanel宽度的33%.看起来像这样:

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
Run Code Online (Sandbox Code Playgroud)

它显示的内容如下所示: 截图

唯一的问题是我希望"艺术尺寸"字段/标签与"广告商"和"艺术类型"字段在同一行上对齐.有没有办法添加一个"空白"项目,这样它会强制输入到正确的行?还有另一种方法可以解决这个问题吗?

谢谢!

编辑:这工作:

{
    xtype: 'component',
    fieldLabel: ' ',
    labelSeparator: ' ',  
}
Run Code Online (Sandbox Code Playgroud)

d.r*_*aev 8

默认情况下,隐藏空标签(该字段被推向左侧).而不是把' ' 标签 ...

fieldLabel: ' ',
labelSeparator: ' ', 
Run Code Online (Sandbox Code Playgroud)

你可以正确地做到:

hideEmptyLabel : false
Run Code Online (Sandbox Code Playgroud)

即使没有指定标签,女巫也会对齐您提交的组件.


dma*_*man 7

编辑:这工作:

           {
                xtype: 'component',
                fieldLabel: ' ',
                labelSeparator: ' ',  
            }
Run Code Online (Sandbox Code Playgroud)