Question

如何增加展开sap.m.CustomTile的图块的大小并将其添加到sap.m.TileContainer？

我想应用像

这样的大小

var oBorderLayout = new sap.ui.commons.layout.BorderLayout({width: "499px", height: "214px"});

到我已扩展的图块，并希望将其显示在图块容器中。

jQuery.sap.declare("news.control.NewsTile");

//jQuery.sap.require("sap.m.CustomTile");

//....custom tile created and extended
sap.m.CustomTile
        .extend(
                "news.control.NewsTile",
                {

                    metadata : {
                        properties : {
                            "icon" : {
                                type : "string",
                                defaultValue : "sap-icon://shipping-status"
                            }
                        },
                    },

                    init : function() {
                        //sap.m.CustomTile.prototype.init.call(this);
                        var oTwoDaysAgo = new Date();
                        oTwoDaysAgo.setDate(oTwoDaysAgo.getDate() - 2);
                        var oFinanceArticle = new sap.suite.ui.commons.FeedItem(
                                {
                                    title : "Help! My Sister Wants Me Off Her Credit Cards",
                                    image : "images/balloons.jpg",
                                    link : "http://finance.yahoo.com/news/help-sister-wants-off-her-110045864.html",
                                    source : "Yahoo Finance",
                                    publicationDate : oTwoDaysAgo
                                });

                        var oHourAgo = new Date();
                        oHourAgo.setHours(oHourAgo.getHours() - 1);
                        var oStyleArticle = new sap.suite.ui.commons.FeedItem(
                                {
                                    title : "How To Be In Style This Season",
                                    image : "images/grass.jpg",
                                    link : "http://www.zappos.com/",
                                    source : "Zappos",
                                    publicationDate : oHourAgo
                                });
                        var articles = new Array();
                        articles.push(oStyleArticle);
                        articles.push(oFinanceArticle);

                        var oFeedTile = new sap.suite.ui.commons.FeedTile({
                            items : articles,

                        });


                        var oBorderLayout = new sap.ui.commons.layout.BorderLayout({width: "499px", height: "214px"});

                        // Add the FeedTile to the container
                        this.setContent(oFeedTile);




                    },

                    renderer : {},
                    onAfterRendering : function() {
                        sap.m.CustomTile.prototype.onAfterRendering
                                .call(this);
                    }

                });



var container1 = new sap.m.TileContainer("t1",{
    height : "50%",
    width:"75%",
    tiles : [ new sap.m.StandardTile({
        icon : "sap-icon://pause",
        title : "Important Tile"
    }), new sap.m.StandardTile({
        icon : "sap-icon://pause",
        title : "Another Important Tile"
    }), new sap.m.StandardTile({
        icon : "sap-icon://pause",
        title : "Another Important Tile"
    }), new sap.m.StandardTile({
        icon : "sap-icon://pause",
        title : "Another Important Tile"
    })
    ]
}) 
var container2 = new sap.m.TileContainer("t2",{
    height : "50%",
    width:"62%",

    tiles : [ new sap.m.StandardTile({
        icon : "sap-icon://play",
        title : "Important Tile"
    }),new sap.m.StandardTile({
        icon : "sap-icon://play",
        title : "Important Tile"
    }),new news.control.NewsTile({

    })]
});

new sap.m.App({
    pages : new sap.m.Page({
        enableScrolling : true,
        title : "TILes ",
        content : [ container1, container2]
    })
}).placeAt("content");
});

Answer 1

对我来说，添加一个有效的样式类：

//In your css file
.myStyle{
height: 9rem;
width: 11rem;        
}
//in the coding        
var oTile = new sap.m.CustomTile({content: oGrid}).addStyleClass('myStyle');

由于某种原因，构造函数中width属性的直接指定会导致奇怪的效果。在图块ui 1的文档中给出了固定大小8.5 x 10 em ^ 2，因此您可能只能通过样式类重载此设置。

https://sapui5.hana.ondemand.com/sdk/docs/api/symbols/sap.m.CustomTile.html

如何设置扩展sap.m.CustomTile的tile的大小

1 个答案: