extjs集裝箱hbox高度100％

我是新的extjs，只是卡在動態（百分比）高度在hbox設置。extjs集裝箱hbox高度100％

這裏是我的ExtJS的代碼

"xtype": "container", 
"layout": "fit", 
"width": "100%", 
"height": "100%", 
"cls": "dashboard-layout dashboard-layout-1-2", 
"items": [ 
    { 
    "xtype": "dashboardpanelcontainer", 
    "height": "45%" 
    }, 
    { 
    "xtype": "container", 
    "layout": "fit", 
    "width": "100%", 
    "height": "45%", 
    "layout": 
     { 
     "type": "hbox", 
     "align": "stretch" 
     }, 
    "items": [ 
     { 
     "xtype": "dashboardpanelcontainer", 
     "flex": 1 
     }, 
     { 
     "xtype": "ruban-dashboardpanelcontainer", 
     "flex": 1 
     }] 
    }]

代碼這個和平是工作的罰款，並設置高45％

"xtype": "dashboardpanelcontainer", 
"height": "45%"

的容器「的xtype」第二項：「容器」的設置高度爲45％，但hbox項目不選擇這個45％，hbox項目的高度是0px

我不能使用「xtype」：「窗口」或「xtype」：「視口」需要裏面的「xtype」：「風ow「

任何幫助如何在我的情況下設置容器hbox項目高度的百分比45％。

如果我在hbox中添加項目的風格，它不是工作壓力太大

"xtype": "dashboardpanelcontainer", 
"flex": 1, 
"style": 
    { 
    "height": "100%" 
    }

感謝您的幫助

來源

2014-02-11 user2894127

[在橫向盒ExtJS的100％的高度（可能重複http://stackoverflow.com/questions/21704630/extjs-100-height-in - 盒） – Akatum

我看到了，答案是誰的人可以使用「xtype」：「視口」，很不幸，我不能使用視口，我使用「xtype」：「容器」 – user2894127

百分比高度被觸摸的支持，但在內線only pixel height is officially supported ...

然後，您的父容器有layout: 'fit'，所以它只需要一個孩子。如果要垂直堆疊組件，請使用vbox佈局。其flex選項會讓你相對較小的孩子。它本身不使用百分比，但它對比率起作用，所以它是一樣的。

下面是密切看起來像你的一個例子：

Ext.onReady(function() { 

    var ct = Ext.widget({ 
     renderTo: Ext.getBody(), 
     xtype: 'container', 
     style: 'background-color: pink;', 
     width: '100%', 
     height: '100%', 
     layout: { 
      type: 'vbox', 
      align: 'stretch' 
     }, 
     items: [{ 
      xtype: 'panel', 
      bodyStyle: 'background-color: magenta;', 
      flex: 45 
     },{ // Filler for the remaining 15% 
      xtype: 'component', 
      flex: 15 
     },{ 
      xtype: 'container', 
      width: '100%', 
      flex: 45, 
      layout: { 
       type: 'hbox', 
       align: 'stretch' 
      }, 
      items: [{ 
       xtype: 'panel', 
       bodyStyle: 'background-color: yellow;', 
       flex: 1 
      }, { 
       xtype: 'panel', 
       bodyStyle: 'background-color: cyan;', 
       flex: 1 
      }] 
     }] 
    }); 

    // Since I've rendered to the body without using a viewport, I have to 
    // refresh the layout if the window is resized... 
    Ext.EventManager.onWindowResize(function() { 
     ct.doLayout(); 
    }); 
});

更新

這是我使用的HTML代碼。正如你所看到的，沒有什麼特別的吧...

<html> 
    <head> 
     <link rel="stylesheet" href="../../ext-4.2.1/resources/css/ext-all-debug.css" /> 
     <script type="text/javascript" src="../../ext-4.2.1/ext-all-dev.js"></script> 
     <script type="text/javascript" src="app.js"></script> 
    </head> 
    <body> 
    </body> 
</html>

來源

2014-02-11 23:13:15 rixo

感謝rixo，但它仍然不工作與高度：'100％'（在第一個容器中），如果我在屏幕上看到面板時將其更改爲px。你的身體元素是指定像素還是一些style/css元素的html高度？ – user2894127

不，沒有這種類型......我已經添加了我的HTML標記供您查看。我已經在Chrome和Firefox中測試過它，結果相同。無論如何，如果你真的想渲染身體的高度和寬度爲100％，那麼你應該真正使用一個視口，正如回答你之前的問題的人所建議的那樣。 – rixo

只是爲了測試我在這個例子中添加body元素，我真的需要大約60％的body，將它想象成html中的div元素之一，而頁面的其他內容來自html而不是extjs，所以我可以'不要使用視口。我試圖甚至複製粘貼你的例子，我得到一個錯誤： Uncaught TypeError：對象原型可能只是一個對象或null 未捕獲TypeError：對象[對象對象]沒有方法'addCls' – user2894127

extjs集裝箱hbox高度100％

回答

相關問題