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

我有一个3列的模板面板。每列为模板宽度的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

它显示的内容如下所示：

唯一的问题是我希望“艺术尺寸”字段/标签与“广告商”和“艺术类型”字段在同一行上对齐。有没有办法添加一个“空白”项，这样它就可以将条目下放到正确的行？有没有另一种方法是我遗漏的

谢谢

编辑： 这起作用了：

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

编辑：这起作用了：

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

---

您的解决方案可以工作，但它不是ExtJS（/HTML tables）方式

您使用的是

列

布局，因此可以在标题名称字段上使用

colspan:2

，从而获得相同的输出。

---

您还可以使用rowspan使字段覆盖两行：）

默认情况下，隐藏空标签（字段被推到左侧）。 而不是将标签

fieldLabel: ' ',
labelSeparator: ' ', 

您可以正确地执行此操作：

hideEmptyLabel : false

---

即使未指定标签，witch也会对齐已归档的组件。

以上各项似乎都不适用于我。我必须明确设置empy牢房的高度

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

至少可以说令人失望

---

但是，这仅适用于vBox布局。如果我使用锚定布局，那么什么都不起作用：（

你可以尝试添加一个空白的组件。例如，{xtype:'component'}在艺术尺寸项目前面。好主意，但这不起作用。我必须为它指定参数吗？添加你的答案并将其标记为已接受，以便其他人可以看到它