需要幫助來確定要使用哪種佈局？

我需要一些幫助理解佈局更好。我觀看了一些截屏視頻和示例等，但是我無法完成我需要的內容，並且我認爲我沒有正確理解內容。需要幫助來確定要使用哪種佈局？

我想創建一個頁面，頂部有一個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

需要幫助來確定要使用哪種佈局？

回答

相關問題