Question

我想定义以下控件排列：

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>

结果如下：

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

有人知道如何布局控件，以便文本区域覆盖单元格的整个高度？（...当然我不想定义像素高度......！）

谢谢！

Answer 1

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

vma.createRow(vvb,vta); vta.setHeight("100%");
<顺便说一句：你是否从createRow（...）获得了异常？我认为createRow（...）只允许一个参数： https://sapui5.netweaver.ondemand.com/sdk/docs/api/symbols/sap.ui.commons.layout.MatrixLayout.html#createRow

Answer 2

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

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

http://jsbin.com/xoyakicarora/1/edit?html,output

矩阵布局，高度100％的控制不覆盖单元的整个高度

2 个答案: