javascript - 需要帮助来确定使用哪种布局？

Question

我需要一些帮助来更好地理解布局。我观看了一些截屏视频和示例等。但我无法完成我需要的事情，而且我认为我没有正确理解事情。

我想创建一个顶部有网格且视口(viewport)宽度为 100% 的页面。 (实际上，在我的真实页面中，它位于特定的 div 中，但我们假设...)然后在此网格下方，我需要在左侧放置一个 TreePanel，其宽度为 1/3，另一个 2/3 为第二个网格。

我正在尝试使用 TableLayout，以便我可以让第一个网格跨越第一行上的两列，第二行将包含树和第二个网格。

我在页面上有我的顶部网格和我的树，但顶部网格的高度不会自动计算，无论其中有多少行，它都只有几个像素高，如果我调整浏览器窗口的大小，我不会网格上没有水平滚动条。

所以，我的猜测是 TableLayout 确实不是我应该使用的，但也许我错了。我怎样才能实现这个布局？使用 BorderLayout 会更好吗？

这是我的 JS 代码(distributePMMPanel 只是页面上的一个普通 div，我还有另一个 JS 组件，在创建带有“mytree” renderTo 的树之后加载，因此树在第二项的 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'
        }
    ]
    });
};

另外，我有以下 CSS:

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

Answer 1

我肯定会看看 borderlayout。

你的网格是北你的树在西边您的另一个网格是中心

应该是带有边框布局的快照。