Question

我使用SAPUI5创建了一个使用灵活列布局的应用程序。

我试图在页面之间导航，但是遇到了困难。

这是主要的xml视图：

<mvc:View id="Main" controllerName="SAP.demo.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.f" xmlns:core="sap.ui.core" xmlns:m="sap.m">
<m:App id="idAppControl">
    <m:pages>
        <m:Page title="{i18n>title}">
            <m:content>
                <FlexibleColumnLayout id="fcl" initialMidColumnPage="start" layout="TwoColumnsBeginExpanded">
                    <beginColumnPages>
                        <m:Page title = "Master">
                            <m:content>
                                <Button text="Chart Button" press="displayChart"/>
                            </m:content>
                        </m:Page>
                    </beginColumnPages>
                    <midColumnPages>
                        <m:Page id="start" title = "Detail">
                            <m:content>
                                <core:Fragment fragmentName="SAP.demo.view.Start" type="XML"/>
                            </m:content>
                        </m:Page>
                        <m:Page id="charts" title="Charts">
                            <m:content>
                                <core:Fragment fragmentName="SAP.demo.view.Charts" type="XML"/>
                            </m:content>
                        </m:Page>
                    </midColumnPages>
                </FlexibleColumnLayout>
            </m:content>
        </m:Page>
    </m:pages>
</m:App>

我想从开始页面导航到图表页面。控制器如下：

sap.ui.define([
"sap/ui/core/mvc/Controller"], function (Controller) {
"use strict";

return Controller.extend("SAP.demo.controller.Main", {
    displayChart:function(oEvent){
        this.byId("fcl").toMidColumnPage("charts");

    }
});});

有人可以告诉我我在做什么错吗，因为即使我按了按钮，它仍然停留在开始页面上。

Answer 1

这是因为视图的真实ID不是“图表”，而是“ __xmlview0--图表”。始终小心使用ID，并使用API方法byId('theIDHere')。

在您的情况下，请使用以下选项之一：

displayChart:function(oEvent){
   this.getView().byId("fcl").toMidColumnPage(this.getView().byId("charts"));
}

或

displayChart:function(oEvent){
   this.getView().byId("fcl").toMidColumnPage(this.getView().byId("charts").getId());
}

还将正确的XML名称空间添加到您的按钮

<m:Button text="Chart Button" press="displayChart"/>

Answer 2

设法通过以下代码对其进行修复：

displayChart: function () {
    this.byId("fcl").toMidColumnPage(this.createId("charts"));
},

灵活的列布局导航（SAPUI5）

2 个答案: