Question

我是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”：“容器”也将高度设置为45％，但是hbox项目没有选择这个45％，hbox项目的高度是0px

我不能使用“xtype”：“window”或“xtype”：“viewport”需要在“xtype”里面：“window”

任何帮助如何将容器hbox项目高度设置为百分比为45％。

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

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

感谢您的帮助

Answer 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>

extjs容器hbox高度100％

1 个答案: