Как сделать так, чтобы ширина Ext.Panel перекрывала ширину макета родительской таблицы?

Question

В следующем коде, если я определяю верхнюю область как литерал объекта , тогда он переопределяет штраф по ширине таблицы по умолчанию:

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 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'
},