0

hbox レイアウトと 1 行のコンポーネント (コンボボックスとテキスト フィールド) を含むパネルがあります。私がやろうとしているのは、既存のコンポーネントの下にまったく同じコンポーネント ラインを複製することです。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 行目と同じです

ああ、ボタンがあります:)

4

1 に答える 1

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',
         ...
      }]
   }]
}
于 2013-08-05T18:13:16.850 に答える