How to make Ext.Panel width override width of its parent table?

Question

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

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

Be that as it may, if I define it as Ext.Panel , it mistakenly defaults to the width of the table:

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

How to force Ext.Panel to override default table height?

Here is 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, as you will override it for all elements anyway.

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