個々のアイテムをhboxレイアウトのエクステンションに配置

Question

自分のパネル内のアイテムの一部を左に配置し、最後のアイテムを右に配置することはできますか？真ん中に空きスペースがあるように。今、私はのhboxレイアウトを使用して、途中で空の容器を入れて、このようにそれを曲げています：

 items: [{ 
     xtype: 'container', 
     layout: 'hbox', 
     items: [{ 
      xtype: 'label', 
      text: 'Filter on vehicle' 
     },{ 
      xtype:'textfield' 
     },{ 
      xtype: 'button', 
      text: '...' 
     },{ 
      xtype: 'container', 
      flex:1 
     },{ 
      xtype: 'button', 
      text: 'New' 

     },{ 
      xtype:'button', 
      text: 'Edit' 

     },{ 
      xtype: 'button', 
      text: 'Delete' 
     }] 
    }] 

これを行うには、任意のより良い方法はありますか？

Answer 1

これは、より良い解決策であるかどうかわかりません。しかし、DOMの方が軽いでしょう。

containerの代わりにtbfillxtypeを使用できます。

{ 
      xtype: 'container', 
      layout: 'border', 
      items: [{ 
       xtype: 'label', 
       text: 'Filter on vehicle', 
      },{ 
       xtype:'textfield', 
      },{ 
       xtype: 'button', 
       text: '...',  
      }, 
      { 
       xtype:'tbfill' 
      },{ 
       xtype: 'button', 
       text: 'New', 
      },{ 
       xtype:'button', 
       text: 'Edit', 
      },{ 
       xtype: 'button', 
       text: 'Delete', 
      }], 
} 

Working Example

Answer 2

あなたはボタン、テキストフィールド、ラベル、コンボボックスなどの要素を使用したい場合は...あなたはExt.toolbar.ToolbarのXTYPE使用することができます。ツールバーを。したがって、アイテムを右に置く必要がある場合は、 ' - >'で簡単にこれを行うことができます。また、 '|'区画線を区画線に置く。

Ext.create('Ext.container.Container', { 
    renderTo: Ext.getBody(), 
    items: [ 
     { 
      xtype: 'toolbar', 
      layout: 'hbox', 
      items: [ 
       { 
        xtype: 'label', 
        text: 'Filter on vehicle' 
       }, 
       { 
        xtype: 'textfield' 
       }, 
       { 
        xtype: 'button', 
        text: '...' 
       }, 
       { 
        xtype: 'button', 
        text: 'New' 
       }, 
       '->', 
       { 
        xtype: 'button', 
        text: 'Edit' 
       }, 
       { 
        xtype: 'button', 
        text: 'Delete' 
       }      
      ] 
     } 
    ]   
}); 

Answer 3

あなたがやっていることはうまくいきますが、間違いなく1つのマイナーな提案がある最高の解決策です。わずかに軽いので 'コンテナ'の代わりに 'コンポーネント'を使用してください。

「tbfill」と「 - >」の以前の回答は、実際に行っていることと同じです。 ' - >'は 'tbfill'の略語であり、 'tbfill'は文字通りflex：1コンポーネントです。

すべての3つのソリューションは正常に動作するはずですが、tbfillを使用するのはツールバーの実装の詳細を知ること、つまりhboxを使用するためです。 Senchaは将来のリリースでどのようにツールバーとtfillが動作するかを自由に変更できます。その時点であなたのコード（tbfillを使用している場合）は壊れています。