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

在以下代码中,如果我将顶部区域定义为对象文字,则它将覆盖默认的表宽度fine：

var top_area = {
    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
});

如何获取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 @R_935_4045@ion',
            width: 600,
            height: 600,
            colspan: 2
        },{
            frame: false,
            border: false,
            width: 600,
            height: 600,
            colspan: 2,
            items: [ table_wrapper2 ]
        }
    ]
});

解决方法:

尝试删除默认宽度,因为无论如何您都将覆盖所有默认宽度.

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