Question

我有以下简单的HTML页面：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
    <script src="resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-libs="sap.ui.commons, sap.ui.table, sap.ui.ux3"  
            data-sap-ui-theme= "sap_bluecrystal">
    </script>
    <script>
            sap.ui.localResources("zvhr_dashboard");
            var view = sap.ui.view({id:"idDashboard1", viewName:"zvhr_dashboard.Dashboard", type:sap.ui.core.mvc.ViewType.JS});
            view.placeAt("content");
    </script>
</head>
<body class="sapUiBody" role="application">
    <header class="header">Page Header</header>
    <div id="content" class="content">
        <div id="totalHoursChart" class="chartContainer"></div>
        <div id="totalCostChart" class="chartContainer"></div>
        <div id="totalCountChart" class="chartContainer"></div>
    </div>
</body>

容器 totalHoursChart ， totalCostsChart ， totalCountChart 适用于折线图。每当模板由于行

而呈现时

var view = sap.ui.view({
    id:"idDashboard1",        
    viewName:"zvhr_dashboard.Dashboard", 
    type:sap.ui.core.mvc.ViewType.JS
});          
view.placeAt("content");

在内容 div中创建的div只有一个div，我绘制并放置在相应图表容器中的折线图被覆盖。我无法弄清楚如何进行这种嵌套视图。

我一直无法找到一个显示如何执行此操作的简单示例。

Answer 1

创建一个单独的div来放置您的视图：

<div id="content" class="content">
    <div id="dashboardContainer"></div>
    <div id="totalHoursChart" class="chartContainer"></div>
    <div id="totalCostChart" class="chartContainer"></div>
    <div id="totalCountChart" class="chartContainer"></div>
</div>

view.placeAt("dashboardContainer");

Answer 2

嗯，我能够实现我所需要的，我想它确实符合我的要求。我提到this并且理解整个页面可以有一个布局，我可以在该布局中放置多个视图。我提供的链接是VerticalLayout，但有很多选项可供选择。使用它我能够放置三个视图（在我的情况下，一个在另一个下面的折线图）。我唯一不喜欢的是，我必须为放置在布局中的每个视图提供固定宽度（以像素为单位），因为当我以百分比给出宽度时，视图在页面渲染完成后开始缩小。

所以为了遵循@Qualiture的建议，我在一个单独的div中做到了。

嵌套的JS视图

2 个答案: