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％

回答

相关问题