我用其他一些控件扩展了“ CustomTile”，并计划在TileContainer中使用它。
新Tile的示例代码：
jQuery.sap.declare("xyz.control.MySpecialTile");
jQuery.sap.require("sap.m.CustomTile");
sap.m.CustomTile.extend("xyz.control.MySpecialTile", {
metadata : {
properties : {
"icon" : {
type : "string",
defaultValue : "sap-icon://shipping-status"
}
},
},
// will be called during creation time
init : function() {
this.addStyleClass("someStyle");
var oCont = ... some content build with other controls ...
this.setContent(oCont);
},
renderer: {},
onAfterRendering : function() {
}
});
var oFunctions = new sap.m.TileContainer({
width : "100%", // sap.ui.core.CSSSize
height : "100%", // sap.ui.core.CSSSize
tiles : [oCustomTile1, oCustomTile2, oMySpecialTile], // sap.ui.core.Control
});
哪里：
oCustomTile1和oCustomTile2是一些标准的CustomTiles，而oMySpecialTile是我自己的图块的实例。如果将“ oMySpecialTile”放置在页面中的某个位置，则将显示它，但如果将其放置在TileContainer中（如代码中所示），则该瓦片将被隐藏。
问题是，我的代码是否存在任何问题，或者这是TileContainer中的错误？
我可以假设TileContainer检查元素的类型并且不知道我的“新”类吗？
我的一般想法是，使用一些已定义的内容结构构建一个CustomTile，并可以通过绑定来定义一些属性。
最佳答案
您需要调用onAfterRendering的基本sap.m.CustomTile函数：
onAfterRendering : function() {
sap.m.CustomTile.prototype.onAfterRendering.call(this);
}
请检查并运行代码段。
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<script>
jQuery.sap.declare("xyz.control.MySpecialTile");
jQuery.sap.require("sap.m.CustomTile");
sap.m.CustomTile.extend("xyz.control.MySpecialTile", {
metadata: {
properties: {
"icon": {
type: "string",
defaultValue: "sap-icon://shipping-status"
}
},
},
// will be called during creation time
init: function() {
sap.m.CustomTile.prototype.init.call(this);
this.addStyleClass("someStyle");
var oCont = new sap.m.Button({
text: "My Custom Tile 2"
});
//... some content build with other controls ...
this.setContent(oCont);
},
renderer: {},
onAfterRendering: function() {
sap.m.CustomTile.prototype.onAfterRendering.call(this);
}
});
var container1 = new sap.m.TileContainer({
width: "100%", // sap.ui.core.CSSSize
height: "100%", // sap.ui.core.CSSSize
tiles: [new sap.m.CustomTile({
content: new sap.m.Button({
text: "Custom Tile 1"
})
}), new xyz.control.MySpecialTile(), new sap.m.CustomTile({
content: new sap.m.Button({
text: "Custom Tile 3"
})
})],
});
new sap.m.App({
pages: new sap.m.Page({
enableScrolling: false,
title: "Tile Container",
content: [container1]
})
}).placeAt("content");
</script>
<body id="content">
</body>