我有一个带有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行
哦,还有一个按钮:)
答案 0 :(得分:0)
我会使用面板的锚布局,每个行都有一个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',
...
}]
}]
}