3

我是 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%"
  }

谢谢您的帮助

4

1 回答 1

5

Touch 支持百分比高度，但在 Ext中，官方只支持像素高度...

然后，您的父容器有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-11T23:13:15.510 回答