2012-03-14 5 views
0

コンテナパネル内のスペースを埋めるためにパネルを取得できません。コンテナは、2つの子パネルを持つvboxレイアウトのパネルです。私はExtjs how to set 100% height for vbox panel を見て、同様のことをしていますが、うまくいかないようです。コンテナを満たすためにvboxレイアウト内のパネルを取得する方法は?

スクリーンショット: - http://i.imgur.com/nAbCr.png スクリーンショットは、私は「フィット」レイアウトを使用するかさえ含むパネルでコンボボックスまたはoptionsviewを持っていけないときからです。だから、私が望むのは、 'オプション'パネルが '結果'パネルまでずっと下がっていくことです。現在のVBoxレイアウト これは私が得るものです - http://i.imgur.com/cB0k1.png

Ext.define('PA.view.CreateReportView', { 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.createreportview', 
    id: 'createreport-panel', 
    requires: [ 
     'PA.view.OptionsView', // options panel 
    'PA.common.Connection'], 

    title: 'Create Report', 
    items: [{ 
     xtype: 'panel', 
     layout: { 
      type: 'vbox', 
      align: 'stretch' 
     }, 
     items: [{ 
      xtype: 'panel', 
      border: false, 
      height: '50px', 
      items: [{ 
       xtype: 'combobox', 
       .... 
      }] 
     }, { 
      xtype: 'panel', 
      border: false, 
      flex: 1, 
      items: [{ 
       xtype: 'optionsview', // options panel 
       style: { 
        paddingTop: '10px' 
       } 
      }] 
     }] 
    }] 
}); 

答えて

2

height:の値は数ではなく文字列でなければなりません。代わりにheight: 50を使用してください。

+0

これもやってみましたが、うまくいきませんでした – Armaan

+0

あなたの外側の「レポート作成」パネルにレイアウトが指定されていないためです。あなたはそれに 'layout: 'fit''を与えるべきです。または、追加のパネルコンポーネントを完全に取り外します。 –

+0

レイアウトをcreatepanelに収めるように設定し、optiopnsviewを含むパネルを修正しました。 – Armaan

1

私はあなたが必要とするものに近いと思います。いくつかの観察: 1.高さは整数(px接尾辞なし) に設定する必要があります。2.デフォルトがあるにもかかわらず、子を持つ各コンテナにレイアウトが定義されている必要があります。 ExtJSのフレームワークについて知っているFirebugのプラグイン - 私は追加することになり

ここにあなたのレイアウトが合理的にうまく機能しているhttp://jsfiddle.net/dbrin/NJjhB/

もう一つの提案は、開発者のためのイルミネーションのようなツールを使用することです。

+0

ありがとう!これは動作するように思われますが、コンボボックスもページの右端まで伸びています。私はそれのための特定の幅を指定しているが、私はレイアウトがそれを上回ると思います。それを修正するための提案はありますか? – Armaan

+0

それはアライメントです:ストレッチが活躍します。コンボをその設定から切り離す必要がある場合は、ストレッチするコンテナにラップする必要があるかもしれませんが、コンボボックスはコンボボックスとは違ったレイアウトになります。 – dbrin

+1

あなたのレイアウトについて考えていたもう1つのコメントは、必要なレイアウトを得ることとパネルをオーバーネストすることのバランスを慎重にすることです。オーバーネストはパフォーマンスの低下をもたらします。 – dbrin

関連する問題