Need help to figure out which layout to use ?

Question

Hello

I need some help on understanding layouts better. I watched some of the screencasts and the examples, etc. But I can't get done what I need and I think I'm not understanding things correctly.

I want to create a page with a Grid on top with a 100% width of the viewport. (Actually in my real page it's in a specific div but let's just assume...) Then below this grid, I need a TreePanel on the left for 1/3 of the width and the other 2/3 by a second Grid.

I'm trying to use the TableLayout so that I can have the first Grid span the two columns on the first row and second row would have the tree and the 2nd grid one besides the other.

I have my top grid and my tree on the page but the height of the top grid is not calculated automatically, it's just a few pixel high no matter how many rows are in there, and if I resize the browser window I don't get horizontal scrollbars on the grid.

So, my guess is that really the TableLayout is not what I should be using, but maybe I'm wrong. How can I achieve this layout ? Would I be better off using the BorderLayout ?

Here's the JS code I have (distributePMPanel is just a plain div on the page and I have another JS component that is loaded after that creates the Tree with a renderTo of 'mytree' so the Tree outputs in the second item's div):

_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'
        }
    ]
    });
};

Also, I have the following CSS:

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

Answer 1

I would definitely look at borderlayout.

Your grid is North Your tree is West Your other grid is Center

Should be a snap with borderlayout.