Ext JS 4 - hbox、vboxなどを使用してフォームにフィールドをレイアウトする

Question

ウィンドウ内に単純なExt JS 4フォームがあります（MVCスタイルアプリ）。下の例は、4つのフィールドを示しています。この例は単純化されていますが、今ではhboxとvboxを使ってこれらのフィールドをレイアウトする必要があります。

どうすれば最初の2つのフィールドを取り、フォームの一番上に横に表示されるようにフォームの上に表示され、残りのフィールドはhboxの下にあるvboxに配置され、縦に表示されます。

（私の実際のフォームは、より多くのフィールドを持って、私は、様々な他のhbox/vboxesを持っていますが、私はちょうど始めるために探しています）：

Ext.define('ESDB.view.encounter.Edit', { 
    extend: 'Ext.window.Window', 
    alias : 'widget.encounteredit', 
    title : 'Edit Encounter', 
    layout: 'fit', 
    width: 700, 
    autoShow: true, 

    initComponent: function() { 
     this.items = [ 

     { 
      xtype: 'form', 
      items: [ 
       { 
       xtype: 'displayfield', 
       name: 'id', 
       fieldLabel: 'ID' 
       }, 
       { 
        xtype: 'displayfield', 
        name: 'cid', 
        fieldLabel: 'cid#' 
       }, 
       { 
        xtype: 'displayfield', 
        name: 'addedDate', 
        fieldLabel: 'Added' 
       }, 
       { 
        xtype: 'displayfield', 
        name: 'clientID', 
        fieldLabel: 'Client#' 
       } 
        } 
    ] 

    } 

私はレイアウトsencha pageの様々な例を見てきました、 sencha docs、そして最後にanother one - この最後のものは、フォームツリー、2列のフィールドセット、項目[]があるフォームを表示し、そこにレイアウトコードがあり、部分的にそれを得ることができたhbox/vboxスタイルのレイアウトに変換することはできませんでした。私がそれをhboxに設定すると、hboxの高さはないので、私はフィールドを見ることができません。

Answer 1

は一例です：

Ext.define('ESDB.view.encounter.Edit', { 
    extend: 'Ext.window.Window', 
    alias : 'widget.encounteredit', 
    title : 'Edit Encounter', 
    layout: 'fit', 
    width: 700, 
    autoShow: true, 

    items: [{ 
     xtype: 'form', 
     items: [ 
      { 
       xtype: 'panel', 
       border: false, 
       layout: 'hbox', 
       items: [ 
        { 
         xtype: 'displayfield', 
         name: 'id', 
         fieldLabel: 'ID', 
         flex: 0.5 
        }, 
        { 
         xtype: 'displayfield', 
         name: 'cid', 
         fieldLabel: 'cid#', 
         flex: 0.5 
        } 
       ] 
      }, 
      { 
       xtype: 'displayfield', 
       name: 'addedDate', 
       fieldLabel: 'Added' 
      }, 
      { 
       xtype: 'displayfield', 
       name: 'clientID', 
       fieldLabel: 'Client#' 
      } 
     ] 
    }] 
}); 

あなたがアップからダウンにフォームに表示ブロックしたい場合は、レイアウトを変更する必要はありません。私は2つの最初の表示フィールドをhboxレイアウトのパネルにラップしました（最初の行だけを分割したいからです）。

Answer 2

1つのパネルに2つのレイアウトを混在させることはできません。したがって、サブパネルを使用してさまざまなルールに従ってフィールドをレイアウトする必要があります。これらのサブパネルはフォームパネルを必要としません（また、そうでなければなりません）。フォームレイアウトを持つ通常のパネル（フィールドラベルを取得します）。 私は日常的にフォームフィールド（これはextjsで十分サポートされていません）の列のようなレイアウトを達成するために似たようなことを行いました：トップフォームパネルにvboxレイアウトがあり、hboxレイアウトとサブフィールドを含むフォームレイアウトを持つサブパネル（またはフィールドセット）。列のレイアウトは、場合によっては役立ちます。

PSここで最後に言及した例（フィールドセットを含む2列）は、実際にはフォームレイアウトで2つのフィールドセット（サブパネル）を含むフォームレイアウトです。だから私は上記のような構造になっています。ここで