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

Question

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

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

我正在尝试使用 TableLayout，以便我可以让第一个 Grid 跨越第一行上的两列，第二行将有树和第二个网格，彼此相邻。

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

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

这是我的 JS 代码（distributePMPanel 只是页面上的一个普通 div，然后我有另一个 JS 组件加载，然后创建具有“mytree”的 renderTo 的 Tree，因此 Tree 在第二个项目的 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。

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

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