Sapui5 矩阵布局，高度为100%的控件不覆盖单元格的整个高度_Sapui5

Sapui5 矩阵布局，高度为100%的控件不覆盖单元格的整个高度

sapui5

Sapui5 矩阵布局，高度为100%的控件不覆盖单元格的整个高度,sapui5,Sapui5,我想定义以下控件的安排： VBox----------- TextArea--- ! TextField ! ! ! ! TextField ! ! ! ! TextField ! ! ! ! TextField ! ! ! ! TextField ! ! ! --------------- ----------- 左边是一些控件：VBox包含内容，右边是一个覆盖整个高度的文本区域。结果：文本区

我想定义以下控件的安排：

VBox----------- TextArea---
! TextField   ! !         !
! TextField   ! !         !
! TextField   ! !         !
! TextField   ! !         !
! TextField   ! !         !
--------------- -----------

左边是一些控件：VBox包含内容，右边是一个覆盖整个高度的文本区域。结果：文本区域的高度应与VBox相同

我尝试使用MatrixLayout+为文本区域指定100%的高度，但失败了。文本区域高度的100%定义不是我想要的解释方式

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>SAPUI5 Testing</title>
    <script id="sap-ui-bootstrap"
        src="resources/sap-ui-core.js"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-libs="sap.m,sap.ui.commons">
    </script>
    <script>
        // VBox for the left side, containing 10 text fields                
        var vvb = new sap.m.VBox();
        for (var i=0;i<5;i++)
        {
            var vtf = new sap.ui.commons.TextField ();
            vtf.setValue("TextField");
            vtf.setWidth("100%");
            vvb.addItem(vtf);
        }

        // TextArea for the right side
        var vta = new sap.ui.commons.TextArea();
        vta.setWidth("100px");
        vta.setHeight("100%"); // <== I want the text area to be as high as the cell
        vta.setValue("Text Area");

        // Matrix + one row        
        var vma = new sap.ui.commons.layout.MatrixLayout({layoutFixed:false});
        vma.createRow(vvb,vta);

        vma.placeAt("uiArea");
     </script>
</head>
<body class="sapUiBody">
    <div id="uiArea"></div>
</body>
</html>

有人知道如何布局控件，使文本区域覆盖单元格的整个高度吗。。。当然我不想定义像素高度

谢谢

尝试更改代码行的顺序。我认为您必须在创建行后设置高度：

vma.createRow(vvb,vta);
vta.setHeight("100%");

顺便问一下：您是否从createRow收到异常。。。？我认为createRow。。。仅允许一个参数：

以下是我找到的解决方案：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>SAPUI5 Testing</title>
    <script id="sap-ui-bootstrap"
        src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-libs="sap.m,sap.ui.commons">
    </script>
    <script>
        // Matrix + one row        
        var vma = new sap.ui.commons.layout.MatrixLayout({
          layoutFixed:false
        });
        for (var i=0; i<10; i++) {
          if (i == 0) {
            var oCell1 = new sap.ui.commons.layout.MatrixLayoutCell();
            oCell1.addContent(new sap.ui.commons.TextField({
              value : "TextField",
              width : "100%"
            }));

            var oCell2 = new sap.ui.commons.layout.MatrixLayoutCell({
              // this is the solution for your desired layout
              rowSpan : 10,
              height : "100%"
            });
            oCell2.addContent(new sap.ui.commons.TextArea({
              width : "100px",
              height : "100%",
              value : "Text Area"
            }));

            vma.createRow(oCell1, oCell2);

          } else {
            vma.createRow(new sap.ui.commons.TextField({
              value : "TextField",
              width : "100%"
            }));
          }
        }

        vma.placeAt("uiArea");
     </script>
</head>
<body class="sapUiBody">
    <div id="uiArea"></div>
</body>
</html>

结果在我看来是100%的高度，请看哦哦-我明白了：这是浏览器之间的不兼容。它在Chrome上工作，但在Firefox 32.0.2上不工作，在Internet Explorer 11上也不工作。-对于Safari，我不知道……改变序列后，行为仍然是一样的。如果这个序列如此相关，我会感到非常惊讶…-和：是的，您可以将控件列表传递到createRow方法中。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>SAPUI5 Testing</title>
    <script id="sap-ui-bootstrap"
        src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-libs="sap.m,sap.ui.commons">
    </script>
    <script>
        // Matrix + one row        
        var vma = new sap.ui.commons.layout.MatrixLayout({
          layoutFixed:false
        });
        for (var i=0; i<10; i++) {
          if (i == 0) {
            var oCell1 = new sap.ui.commons.layout.MatrixLayoutCell();
            oCell1.addContent(new sap.ui.commons.TextField({
              value : "TextField",
              width : "100%"
            }));

            var oCell2 = new sap.ui.commons.layout.MatrixLayoutCell({
              // this is the solution for your desired layout
              rowSpan : 10,
              height : "100%"
            });
            oCell2.addContent(new sap.ui.commons.TextArea({
              width : "100px",
              height : "100%",
              value : "Text Area"
            }));

            vma.createRow(oCell1, oCell2);

          } else {
            vma.createRow(new sap.ui.commons.TextField({
              value : "TextField",
              width : "100%"
            }));
          }
        }

        vma.placeAt("uiArea");
     </script>
</head>
<body class="sapUiBody">
    <div id="uiArea"></div>
</body>
</html>