如何使Ext.Panel寬度覆蓋其父表佈局的寬度？

Question

在下面的代碼，如果我定義頂部區域作爲對象常量，那麼它會覆蓋細默認表寬度：

var top_area = { 
    title:'Orders', 
    width: 1210, 
    colspan: 4, 
    frame: true, 
    border: true, 
    header: true 
}; 

Howver，如果我將其定義爲Ext.Panel，然後它錯誤發生在表中的缺省寬度：

var top_area = new Ext.Panel({ 
    title:'Orders', 
    width: 1210, 
    colspan: 4, 
    frame: true, 
    border: true, 
    header: true 
}); 

如何讓Ext.Panel重寫表的默認高度？

下面是完整的代碼：

var top_area = new Ext.Panel({ 
    title:'Orders', 
    width: 1210, 
    colspan: 4, 
    frame: true, 
    border: true, 
    header: true 
}); 

var table_wrapper2 = new Ext.Panel({ 
    id: 'table_wrapper2', 
    baseCls: 'x-plain', 
    renderTo: Ext.getBody(), 
    layout:'table', 
    layoutConfig: {columns:2}, 
    defaults: { 
     frame:true, 
     width:300, 
     height: 300, 
     style: 'margin: 0 10px 10px 0' 
    }, 
    items:[{ 
      title:'Shopping Cart', 
      width: 600, 
      height: 390, 
      colspan: 2 
     }, 
     { 
      title:'Invoice Address', 
      width: 290, 
      height: 200 
     },{ 
      title:'Delivery Address', 
      width: 300, 
      height: 200 
     } 
    ] 
}) 

var table_wrapper = new Ext.Panel({ 
    id:'table_wrapper', 
    baseCls:'x-plain', 
    renderTo: Ext.getBody(), 
    layout:'table', 
    layoutConfig: {columns:4}, 
    defaults: { 
     frame:true, 
     width: 300, 
     height: 300, 
     style: 'margin: 10px 0 0 10px' 
    }, 
    items:[top_area,{ 
      title:'Customer Information', 
      width: 600, 
      height: 600, 
      colspan: 2 
     },{ 
      frame: false, 
      border: false, 
      width: 600, 
      height: 600, 
      colspan: 2, 
      items: [ table_wrapper2 ] 
     } 
    ] 
}); 

Answer 1

嘗試刪除默認的寬度，因爲要覆蓋其所有項目的反正。

defaults: { 
    frame:true, 
    width: 300, //<-- remove this 
    height: 300, 
    style: 'margin: 10px 0 0 10px' 
},