Displaying rows of components inside a panel - Ext JS

Question

I have a panel with an hbox layout and a single line of components in it: A combobox and text field. What I am trying to do is replicate that exact same line of components beneath the existing components. How can you break a line inside of an hbox layout in Ext JS? (Similar to
in HTML).

Here's my code:

{ 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...

Here's what I'm trying to achieve:

Line 1 will be just text, sort of like a column header Line 2 is the code I have now Line 3 will be just like line 2

Oh and there's a button :)

Answer 1

I would use an anchor layout for the panel, with a container having an hbox layout for each row.

{
   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',
         ...
      }]
   }]
}