title: Displaying rows of components inside a panel - Ext JS
body: <p>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 <br /> in HTML).</p>
  
  <p>Here's my code:</p>
  
  <pre><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...
  </code></pre>
  
  <p>Here's what I'm trying to achieve: 
  <img src="https://i.stack.imgur.com/bgUMl.png" alt="enter image description here"></p>
  
  <p>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</p>
  
  <p>Oh and there's a button :)</p>