layout - 在面板内显示组件行 - Ext JS

Question

我有一个带有 hbox 布局和单行组件的面板：一个组合框和文本字段。我想要做的是在现有组件下复制完全相同的组件行。如何在 Ext JS 中的 hbox 布局内换行？（类似于
HTML）。

这是我的代码：

{ xtype: 'panel', padding: '5 5 5 5', layout: 'hbox',  height: 170, width: '100%', id: 'main', collapsible: true,
    //Query Builder
    items: [
        { xtype: 'combobox', padding: 5, store: filters, id: 'criteria_1_drop_down', displayField: 'field1' },
        { xtype: 'textfield', padding: 5, id: 'criteria_1_input'}
            //code to start new line...

这是我想要实现的目标：

第 1 行将只是文本，有点像列标题 第 2 行是我现在拥有的代码 第 3 行将就像第 2 行一样

哦，还有一个按钮:)

Answer 1

我会为面板使用锚布局，容器的每一行都有一个 hbox 布局。

{
   xtype: 'panel',
   layout: 'anchor',
   items: [{
      xtype: 'container',
      layout: 'hbox',
      items: [{
         xtype: 'component',
         html: 'Text Field'
      }, {
         xtype: 'component',
         html: 'Text Field'
      }]
   }, {
      xtype: 'container',
      layout: 'hbox',
      items: [{
         xtype: 'combo',
         ...
      }, {
         xtype: 'textfield',
         ...
      }]
   }, {
      xtype: 'container',
      layout: 'hbox',
      items: [{
         xtype: 'combo',
         ...
      }, {
         xtype: 'textfield',
         ...
      }, {
         xtype: 'button',
         ...
      }]
   }]
}