JS视图中的SAPUI5多个sap.m.TileContainer [英] SAPUI5 multiple sap.m.TileContainer in JS view

问题描述

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

I have a single page app written in SAPUI5 using JS views. I want to create a "Dashboard" page and put some tiles on it. Therefore I am creating a "sap.m.TileContainer" in the "createContent" function of my view.js-file.

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

What I need to implement is to have two separate TileConatiner because I have important tiles at the top and less important ones at the bottom. But no matter what I do e.g. putting the two TileContainers in a MatrixLayout, HorizontalLayout or as "content" into a sap.m.page it is no longer shown. One TileContainer is shown when I just return this single instance directly without any componet surrounding it.

有人可以帮我吗?以下代码工作正常:

Can anyone help me out here please? Following code works fine:

    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;
}

推荐答案

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

you need to set enableScrolling of your page to false. Because then the page will take 100% of the place. If you do not do it the page will try to be as big as its content.

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

A tile container is by default as big as its parent so both the page and the containers will have a height of 0.

在这里，我将 2 个 Tile 容器放在了彼此下方，因此它们占据了屏幕的一半:

Here i placed 2 Tile containers below each other so they take half of the screen:

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

最好的问候

这篇关于JS视图中的SAPUI5多个sap.m.TileContainer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！