如何使Ext.Panel宽度覆盖其父表布局的宽度？

Question

In the following code, if I define the top area as an object literal , then it overrides the default table width fine:

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

Howver, if I define it as a Ext.Panel , then it erroneously takes on the default width of the table:

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

How do I get the Ext.Panel to override the default height of the table?

Here's the full code:

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

Try removing the default width since you are overriding it for all the items anyway.

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