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

我需要一些帮助理解布局更好。我观看了一些截屏视频和示例等，但是我无法完成我需要的内容，并且我认为我没有正确理解内容。需要帮助来确定要使用哪种布局？

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

我试图使用TableLayout，这样我可以有第一网格跨越的第一行和第二行的两列将有树和第二格栅上除其他。

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

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

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

来源

2010-05-21 SBUJOLD

我肯定会看的borderlayout。

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

应符合的borderlayout瞬间。

来源

2010-05-21 22:59:16 timdev

实际上这将是北=电网和中心=面板与西=树和中心=第二格栅之间的单独边界布局分裂。但是，是的，听起来像边界布局将是适当的布局。 – 2010-05-23 04:36:36

感谢您的更正。 – timdev 2010-05-23 17:52:22

我想本来我是想避免使用边界布局，因为我想尝试具有自动计算的高度。所以，现在我落得这样做有一个BorderLayout的面板和固定的宽度/高度，其中北= firstGrid，东= 2ndGrid和中心=树（虽然在技术上带有在树后面建一个div面板），似乎工作正常。你为什么推荐使用中心面板采用了分离的布局？ – SBUJOLD 2010-05-24 13:20:44

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

回答

相关问题