ExtJS门户-不同大小的列

我需要能够在ExtJS门户中使用不同大小的列。例如，我想在中心区域，一个区域可以容纳一个大的小部件，然后在它的正下方，两个区域可以容纳两个小部件。我一直试着用专栏来解释这个问题，但似乎什么都不管用。帮助？

门户使用

列布局，因此您应该能够根据需要使用标准配置配置列宽。您尝试过什么（例如，发布一些代码）？
以下是我到目前为止所做的：

var portalColumns =
    [{
        columnWidth: .70,
        id: 'firstColumn',
        style: 'padding:10px 0 10px 10px'
    }, {
        columnWidth: .30,
        id: 'secondColumn',
        style: 'padding:10px 0 10px 10px'
    }];

    var mainPanel = new Ext.Panel({
        renderTo: 'pnlContent',
        layout: 'border',
        height: 730,
        width: 1255,
        id: 'mainPanel',
        items: [portalNavigation,
        {
        xtype: 'portal',
        region: 'center',
        margins: '35 5 5 0',
        items: [portalColumns ]
        }]
    });

我知道我可以为整个门户配置列宽，但我需要将它们堆叠起来。所以一根柱子在顶部，横跨整个宽度，然后在它下面的两根柱子由两个单独的宽度组成。如果我必须用HTML来表达，这里是：

桌子
tr td colspan=“2”tr
tr td td tr
表格
如果我做对了，表格布局将更适合您的需要。。。
试一试：