需要帮助找出要使用的布局吗?

我需要一些帮助来更好地理解布局。我看了一些截屏和例子等,但我不能完成我需要的,我认为我没有理解的事情正确。

我想创建一个页面,上面有一个100%宽度的网格(实际上,在我的真实页面中,它在一个特定的div中,但是让我们假设……)然后在这个网格下面,我需要在左边有一个树面板,宽度是1/3,另外2/3是第二个网格。

我正在尝试使用TableLayout,这样我就可以让第一个网格跨越第一行的两列,第二行的树和第二个网格在另一行之外。

所以,我的猜测是,真正的表布局不是我应该用的,但也许我错了。如何实现此布局?使用边框布局会更好吗?

_I.mainPanel = new Ext.Panel({
    id:'main-panel',
    renderTo: 'distributePMPanel',
    baseCls: 'x-plain',
    layout:'table',
    layoutConfig: {columns:2},
    items: [
        new Ext.grid.GridPanel({
            store: new Ext.data.JsonStore({
                fields: Ext.decode(_I.options.pmStore),
                root: 'pmData',
                idProperty: 'id',
                data: Ext.decode(_I.options.pmData)
            }),
            colModel: new Ext.grid.ColumnModel({
                defaults: {
                    sortable : true
                },
                columns: Ext.decode(_I.options.pmColumns)
            }),
            colspan: 2
        }),
        {
            id: 'mytree'
        },
        {
            html: 'Grid 2'
        }
    ]
    });
};

此外,我还有以下CSS:

#distributePMPanel table.x-table-layout { width: 100%; }
#distributePMPanel .x-panel-body { border-width: 0; }