ExtJS Portal佈局問題（內部元素的自動高度/寬度）

Question

我使用http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html來構建門戶。很顯然，我有自定義的窗口，在提供的鏈接中調整它們的高度/寬度。在其中一個窗口中，我有一張圖表和一個網格，我想要並排放置在一排。但是這種方法需要我爲圖形提供高度/寬度。如果我這樣做，圖表不會調整它的高度/寬度，如果我使用父容器的高度和寬度，如示例中所示。請指導我如何完成此操作。我正在使用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'值，例如flex: 1他們都在hbox容器中具有相同的寬度。