Question

我有一个使用JS视图在SAPUI5中编写的单页应用程序。我想创建一个“仪表板”页面并在其上放置一些图块。因此，我在view.js文件的“createContent”函数中创建了一个“sap.m.TileContainer”。

我需要实现的是拥有两个独立的TileConatiner，因为我在顶部有重要的瓷砖，在底部有不太重要的瓷砖。但无论我做什么，例如将两个TileContainers放入一个MatrixLayout，HorizontalLayout或作为“content”放入sap.m.page，它不再显示。当我直接返回这个单个实例而没有围绕它的任何组件时，会显示一个TileContainer。

有人可以帮帮我吗？以下代码工作正常：

    createContent : function(oController) {

    var tileContainer = new sap.m.TileContainer({
        tiles : [ 
            new sap.m.StandardTile({
            icon : "sap-icon://play",
            title : "Important Tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://pause",
            title : "ANOTHER Important Tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://timesheet",
            title : "Third important tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://number-sign",
            title : "UNIMPORTANT ONE",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://locate-me",
            title : "UNIMPORTANT TWO",
            press : function() {
                oController.nav.to("AfoStart");
            }
        })

         ],

    });

    return tileContainer;
}

此代码无效：

    createContent : function(oController) {

    var tileContainerTop = new sap.m.TileContainer({
        tiles : [ 
            new sap.m.StandardTile({
            icon : "sap-icon://play",
            title : "Important Tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://pause",
            title : "Another important Tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://timesheet",
            title : "Third important tile",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }),

         ],

    });

    var tileContainerBottom = new sap.m.TileContainer({
        tiles : [ 
            new sap.m.StandardTile({
            icon : "sap-icon://play",
            title : "UNIMPORTANT ONE",
            press : function() {
                oController.nav.to("AfoStart");
            }
        }), new sap.m.StandardTile({
            icon : "sap-icon://pause",
            title : "UNIMPORTANT TWO",
            press : function() {
                oController.nav.to("AfoStart");
            }
        })
         ],

    });     

    var page = new sap.m.Page("myPage", {

        title: "Dashboard",
        content: [tileContainerTop, tileContainerBottom]

    });

    // OR create MatrixLayout here...doenst work
    // OR create HorizontalLayout here...doesnt work

    return page;
}

Answer 1

您需要将页面的enableScrolling设置为false。因为那时页面将占据100％的位置。如果你不这样做，页面会尝试与其内容一样大。

默认情况下，tile容器与其父容器一样大，因此页面和容器的高度都为0.

在这里，我将2个瓷砖容器放在彼此之下，这样它们占据了屏幕的一半：

http://jsbin.com/disalulekezo/1/

祝你好运

Answer 2

您必须将网页的 enableScrolling 设置为 false ，然后调整 TileContainer的高度。将两个容器的高度设置为50-50％，两个图块都将显示在您的页面上。仅将enableScrolling设置为false将不起作用。

JSUI5中的SAPUI5多个sap.m.TileContainer

2 个答案: