Question

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

我想创建一个页面，顶部有一个网格，视口宽度为100％。（实际上在我的真实页面中它是在一个特定的div中，但我们只是假设...）然后在这个网格下面，我需要一个TreePanel在左边的1/3宽度，另一个2/3由第二个Grid。 / p>

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

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

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

这是我的JS代码（distributePMPanel只是页面上的一个普通div，我有另一个JS组件加载后，创建了一个带有'mytree'的renderTo的树，所以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。

你的网格是北方的你的树是西方的您的其他网格是中心

应该是一个带有borderlayout的快照。

需要帮助找出要使用的布局？

1 个答案: