Dislpaying ряды компонентов внутри панели - Ext JS

Question

У меня есть панель с макетом hbox и одна строка компонентов в ней: поле со списком и текстовое поле. То, что я пытаюсь сделать, это реплицировать ту же самую линию компонентов под существующими компонентами. Как вы можете разбить строку внутри макета hbox в Ext JS? (Аналогично
в 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 будет просто текст, вроде как заголовок столбца Line 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', 
     ... 
     }] 
    }] 
}