佈局問題

我的目標是做出這樣的想法：
enter image description here 有一個帶邊框佈局的視口。「容器」和「中心」都具有「合適」的佈局。「面板」有'vbox'佈局，並有三個元素。第一次加載時，網格有一行。我希望所有的網格能夠捕捉到頂部和底部的所有高度和按鈕面板。如果我沒有指定網格或「容器」或「面板」的高度，我什麼都看不到。
我該如何使它工作？佈局問題

來源

2011-05-22 lvil

刪除多餘的面板並使網格面板本身成爲邊框佈局的中心區域。「按鈕面板」應該是網格面板的工具欄：

new Ext.Viewport({ 
    layout: 'border', 
    items: [ 
     { 
      region: 'center', 
      xtype: 'grid', 
      // ... other required grid properties, like 'store' and 'columns' 
      tbar: [ 
       // Top toolbar. Items are Ext.Button instances. 
       { 
        text: 'Button 1' 
       }, 
       { 
        text: 'Button 2' 
       } 
      ], 
      bbar: [ 
       // Bottom toolbar. Items are Ext.Button instances. 
       { 
        text: 'Button 3' 
       }, 
       { 
        text: 'Button 4' 
       } 
      ] 
     } 
    ] 
});

來源

2011-05-22 15:17:59 owlness

我有一些理由不使用bbar和fbar，儘管最終我使用了它。 – lvil 2011-05-23 09:09:54

問題是，網格和元素將希望使用盡可能少的垂直空間，除非您設置一個固定的高度。最好的解決方案是使用最小高度風格來允許網格只要它想要增長，但總是至少有一些最小值。

來源

2011-05-22 13:55:02 Fourth

它確實與電網的幫助下，現在抓住「小組」的最大高度，但我仍然可以看到什麼，除非我指定的「面板」的高度，由它dinamically添加的方式，但所有的面板和容器doLayout（）執行 – lvil 2011-05-22 14:06:06

這可能是因爲divs不遵守他們的孩子的身高，如果他們有不同的設置。這在浮動div的情況下更成問題。也許這將有助於發佈html在頁面上呈現的方式。你的圖畫很難知道html出現時的樣子。 – Fourth 2011-05-22 14:09:20

沒有html（它是空的），只是加載了onready函數的視口...也許這就是問題 – lvil 2011-05-22 14:16:23

如果您發佈了一些代碼，這將有所幫助。如果面板有一個tbar和bbar，並且它只有一個項目是一個網格面板，那麼你可以給網格面板一個flex（我認爲任何數字都可以），並且你想要layoutConfig對齊：'stretch'。在vbox佈局中，如果沒有提供孩子的flex，它將使用孩子的原始高度。

Panel({ 
    layout: { 
       type: 'vbox', 
       align: 'stretch' 
    }, 
    tbar: {}, 
    bbar: {}, 
    items : [{ 
     xtype:'grid', 
     flex: 1 
    }] 
})

來源

2011-05-22 23:21:30 pllee

回答

相關問題