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

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

对我来说，添加一个style类是可行的：

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

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

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