如何在实例化对象时添加 CSS StyleClass，而不是 object.addStyleClass( "myStyle" )

Question

我使用SAPUI5，我想在实例化对象后立即将样式添加到对象中。例如，我想将样式类"foo"添加到面板内的标签中。

我想做什么，但不起作用：

var oPanel = new sap.m.Panel({
content: new sap.m.Label({
text: "Hello",
styleClass: "foo"
})
});

我不想做的事，但确实有效：

var oLabel = new sap.m.Label({
text: "Hello"
});
oLabel.addStyleClass("foo");
var oPanel = new sap.m.Panel({
content: oLabel
});

Answer 1

还有另一个基于方法链接的选项，它不需要内部元素的专用变量(我想这就是你不喜欢问题中第二个变量的原因)：

var oPanel = new sap.m.Panel({
content: new sap.m.Label({ text: "Hello" }).addStyleClass("foo")
});

Answer 2

您甚至可以编写自己的自定义类，其中样式类是一个聚合。我还不确定如何做到这一点，但我能够编写带有"颜色"聚合的自定义标签。

Answer 3

您可以创建一个函数来返回您的控件实例，并在其中使用addStyleClass方法和其他您想要的

function getControlInstance(FnClass, sId, mSettings) {
mSettings = mSettings || {};
if (typeof sId !== "string") {
mSettings = sId;
sId = null;
}
var oControl = new FnClass(sId, mSettings);
if (mSettings.styleClass) {
mSettings.styleClass = mSettings.styleClass instanceof Array ? mSettings.styleClass : [mSettings.styleClass];
mSettings.styleClass.forEach(function (sClass) {
oControl.addStyleClass(sClass);
});
}
return oControl;
}

像这样使用

var a = getControlInstance(sap.m.HBox, {
styleClass: "test",
id: "asdoiasd",
items: [
new getControlInstance(sap.m.Text, {
styleClass: "test",
text: "Testing"
})
]
})