ExtJSポータルレイアウトの問題（内部要素の高さ/幅の自動設定）

Question

http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.htmlを使用してポータルを構築しています。明らかに、私は提供されたリンクのように高さ/幅を調整するカスタムウィンドウを持っています。窓の1つには、横に並んで配置したいグラフとグリッドがあります。しかし、このアプローチでは、グラフの高さ/幅を指定する必要があります。この例では親コンテナの高さと幅を使ってチャートを作成すると、高さ/幅が調整されません。 hboxレイアウトを使用して、伸びを下げてください。以下のコードを見つけてください。

Ext.apply(this,{layout: { 
     type: 'hbox', 
     align: 'stretch' 
    } 
    ,  width:600,height:300,items: 
    [ 



    { 
     xtype: 'chart', 
     animate: true, 
     shadow: true, 
     height:200, 
     width:200, 
     store: Ext.create('Ext.data.JsonStore', { 
    fields: ['year', 'comedy', 'action', 'drama', 'thriller'], 
    data: [ 
      {year: 2005, action: 23890000}, 
      {year: 2006, action: 38900000}, 
      {year: 2007, action: 50410000}, 
      {year: 2008, action: 70000000} 
      ] 
      }), 
     legend: { 
      position: 'right' 
     }, 
     axes: [{ 
      type: 'Category', 
      position: 'bottom', 
      fields: ['action'], 

     }, { 
      type: 'Numeric', 
      position: 'left', 
      fields: ['year'], 
      title: false 
     }], 
     series: [{ 
      type: 'bar', 
      axis: 'top', 
      gutter: 80, 
      xField: 'year', 
      yField: ['action'], 
      tips: { 

      } 
     }] 





      },{xtype:'grid', 
    collapsible:false,store: Ext.create('Ext.data.ArrayStore', { 
     fields: [ 
     {name: 'company'}, 
     {name: 'price',  type: 'float'}, 
     {name: 'change',  type: 'float'} 
     ], 
     data: myData 
    }), multiSelect: true,viewConfig: {emptyText: 'No information to display'}, 
     columns: [{ 
      text  : 'Company', 
      flex  : 1, 
      sortable : false, 
      dataIndex: 'company' 
     }, 
     { 
      text  : 'Price', 
      width : 75, 
      sortable : true, 
      renderer : 'usMoney', 
      dataIndex: 'price' 
     }] 
      }] 


     }); 

Answer 1

グラフやグリッドに幅と高さを設定する必要はありません。それぞれに 'フレックス'の値を入れてください（例：flex: 1）。両方ともhboxコンテナに同じ幅を持つようにします。