Sapui5 如何设置扩展sap.m.CustomTile的互动程序的大小
如何增加扩展sap.m.CustomTile的互动程序的大小并将其添加到sap.m.TileContainer中 我想申请像这样的尺寸Sapui5 如何设置扩展sap.m.CustomTile的互动程序的大小,sapui5,Sapui5,如何增加扩展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.requir
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");
});
对我来说,添加样式类很有效:
//In your css file
.myStyle{
height: 9rem;
width: 11rem;
}
//in the coding
var oTile = new sap.m.CustomTile({content: oGrid}).addStyleClass('myStyle');
出于某种原因,构造函数中直接指定width属性会导致奇怪的效果。在tile ui的文档中,给定了8.5 x 10 em^2的固定大小,因此您可能只能通过样式类重载此设置