javascript - UI5 GridLayout 内容未设置相同的高度

Question

我有一个带有 GridLayout 的 View ，其中有 2 个内容，一个是 TreeTable，另一个是 Panel

我需要以相同的高度显示两个内容，但面板内的自定义控件的高度不同

View 是

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
    class="sapUiSizeCompact" xmlns="sap.m" xmlns:l="sap.ui.layout"
    xmlns:table="sap.ui.table"
    xmlns:testResp="chiru.controller" 
    height="100%">
    <l:Grid defaultSpan="L10 M10 S10" class="sapUiNoMarginTop sapUiNoMarginBottom sapUiNoMarginBegin sapUiNoMarginEnd">
        <l:content>
            <table:TreeTable 
            selectionMode="MultiToggle"
            enableSelectAll="false"
            rows="{path:'/resources', parameters: {arrayNames:['categories']}}">
                <table:layoutData>
                    <l:GridData span="L2 M2 S2" />
                </table:layoutData>

                <table:columns>
                   <table:Column width="13rem">
                       <Label text="Resources"/>
                       <table:template>
                           <Text text="{name}"/>
                       </table:template>
                   </table:Column>
                </table:columns>
            </table:TreeTable>
            <Panel height="100%">
                <content>
                <testResp:TestResp resources="{/resources}">
                </testResp:TestResp>
                </content>
            </Panel>
        </l:content>
    </l:Grid>
</mvc:View>

我的自定义控件 TestResp 是

/**
 * 
 */
sap.ui.define([
    "sap/ui/core/Control",
    "sap/ui/core/HTML"
], function (Control,HTML) {
    "use strict";
    return Control.extend("chiru.controller.TestResp", {
        metadata : {
            properties : {
                width:  {type : "sap.ui.core.CSSSize", defaultValue : "100%"},
                height: {type : "sap.ui.core.CSSSize", defaultValue : "100%"},
                resources : {type : "Array", defaultValue : []},
                demands : {type : "Array", defaultValue : []}
            },
            aggregations : {
                _timeLine : {type : "sap.ui.core.HTML", multiple: false, visibility : "visible"}
            },
            events : {
                change : {
                    parameters : {
                        value : {type : "int"}
                    }
                }
            }
        } ,
        init : function () {
            this.setAggregation("_timeLine", new HTML({
                content : "<svg id="+this.getId()+"--timeLine></svg>"
            }));
        },
        renderer : function (oRM, oControl) {
            oRM.write("<div");
            oRM.writeControlData(oControl);
            oRM.writeClasses();
            oRM.addStyle("height",oControl.getHeight());
            oRM.addStyle("width",oControl.getWidth());
            oRM.writeStyles();
            oRM.write(">");
            oRM.renderControl(oControl.getAggregation("_timeLine"));
            oRM.write("</div>");
        }
    });
});

看起来像这样

如何使两者高度相同？为什么网格布局不采用相同的高度？我需要使用其他布局吗？

Answer 1

Panel 只会占用父容器中所需的空间，留下一些空白空间，它不会占用整个可用空间。

因此，要使其强制占据剩余空间，您需要显式设置其高度。

将Panel的高度设置为TreeTable的高度。

查看代码

<table:TreeTable id="table">

考虑 oTable 是您的 TreeTable 对象，oPanel 是 Panel 对象。

onAfterRendering: function(){
    var oTable = this.getView().byId("table");
    var tableHeight = $(oTable.getDomRef()).height();
    oPanel.setHeight(tableHeight + "px");
}