extjs 容器 hbox 高度 100%答案

【问题标题】：extjs container hbox height 100%extjs 容器 hbox 高度 100%
【发布时间】：2014-03-09 19:45:38
【问题描述】：

我是 extjs 的新手，只是停留在 hbox 设置中的动态（百分比）高度。

这是我的 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": "container" 也将高度设置为 45%，但 hbox 项目没有选择这 45%，hbox 项目的高度为 0px

我不能使用 "xtype": "window" 或 "xtype": "viewport" 需要在 "xtype": "window" 内

任何帮助如何将容器 hbox 项目高度设置为在我的情况下为 45% 的百分比。

如果我在 hbox 项目中添加样式，它也不起作用

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

感谢您的帮助

【问题讨论】：

extjs 100% height in hbox的可能重复
我看到了，答案对谁可以使用“xtype”：“viewport”有好处，不幸的是我不能使用viewport，我正在使用“xtype”：“container”

标签： extjs containers hbox

【解决方案1】：

Touch 支持百分比高度，但在 Ext 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>

【讨论】：

感谢 rixo，但如果我在屏幕上看到面板时将其更改为 px，它仍然无法使用 height:'100%'（在第一个容器中）。您的 body 元素是具有以像素为单位指定高度的 html 还是某些样式/css 元素？
不，没有这种东西...我已经添加了我的 HTML 标记供您查看。我已经在 Chrome 和 Firefox 中对其进行了测试，结果相同。无论如何，如果您真的想以 100% 的高度和宽度渲染到身体，您应该真正使用视口，正如回答您上一个问题的人所建议的那样。
只是为了测试我在这个例子中添加了body元素，我真的需要大约60%的body，想象它是html中的div元素之一，页面的其他内容不是来自html来自 extjs，所以我不能使用视口。我什至尝试复制粘贴您的示例，但出现错误： Uncaught TypeError: Object prototype may only be an Object or null Uncaught TypeError: Object [object Object] has no method 'addCls'
好吧，如果你设法给容器 div 一些可见的大小，那么它会起作用......见：fiddle.sencha.com/#fiddle/3il。在那里，我为 div 指定了一个 px 高度，但这是因为 iframe（我猜 body 会折叠到它的内容大小）。
这就是我的高度为 0px 的原因，因为它的内容是空的并且它会折叠，如果你想看到空容器，你需要在你的布局中指定 "shrinkWrap": false 并且它可以工作.我会接受你的回答，因为对我来说改变原来的布局是一个好的开始，感谢 rixo 的帮助