2012-01-07 2 views
6

enter image description hereExtJSの方法VBOXパネル

こんにちは〜、

のための100%の高さを設定する私は、パネル2に高さの上に左100%を設定したいが、私は方法がわからない...

真の高さ: '100%' パネル2に、それは動作しません

は、ここに私のテストコード、

{ 
    title : 'EAST', 
    region : 'east', 
    layout : 'vbox', 
    layoutConfig : { 
     align : 'stretch' 
    }, 
    bodyStyle : 'border:1px solid blue', 
    width: 300, 
    items : [ 
     new Ext.Panel({ 
      title : 'Panel 1', 
      border : true, 
      layout : 'fit', 
      height : 250, 
      html : 'PANEL 1 AREA' 
     }), 
     new Ext.Panel({ 
      title : 'Panel 2', 
      border : true, 
      bodyStyle : 'border:1px solid red', 
      layout : 'fit', 
      html : 'PANEL 2 AREA' 
     }) 
    ] 
} 

私は、試してみましたautoHeightです。誰もが知っている

、〜

はありがとう〜私を助けてください!

+0

私は1つのパネルしか持たず、ストレッチ(高さ100%)したいのですが? –

答えて

10

2番目のパネルにはflexプロパティを使用する必要があります。

new Ext.Panel({ 
    title : 'Panel 2', 
    border : true, 
    bodyStyle : 'border:1px solid red', 
    layout : 'fit', 
    html : 'PANEL 2 AREA', 
    flex: 1 
}) 
+0

すごい!できます!どうもありがとうございました! –

4

コンポーネントがBoxLayoutを使用するように構成されているコンテナがレンダリングされるとき

new Ext.Panel({ 
     title  : 'Panel 2', 
     border : true, 
     bodyStyle : 'border:1px solid red', 
     layout : 'fit', 
     html  : 'PANEL 2 AREA', 
     flex  : 1 

    }) 

フレックスのみ用いられる第2のパネルに屈曲性を設定してみてください。 flexプロパティを持つ各子コンポーネントは、フレックス値が指定されたすべてのコンポーネントの合計と比較して、アイテムの相対的なフレックス値に応じて垂直方向(VBoxLayoutによる)または水平方向(HBoxLayoutによる)

+0

すごい!できます!どうもありがとうございました! –

関連する問題