如何将 SAP UI5 控件追加到单选按钮控件

Question

我有一个自定义的单选按钮js类，它扩展了sap.m.RadioButton。 在其属性中，我有一个控件，我想将该控件附加到单选按钮。单选按钮正在 radioButtonGroup 控件中使用。

假设我想将输入控件附加到单选按钮 我的输入如下

let oInput = new sap.m.Input({
width: "100%",
type: sap.m.InputType.Text,
enabled: true
});
//adding then input to radiobutton - this refers to radiobutton
this.$().append("<div>" + oInput + "</div>");

这在我想要的方式上不起作用，因为我看到诸如"元素 sap.m.Input#__input22"之类的文本被附加到控件中。 我尝试做这样的事情：

this.$().append("<div>" + oInput.getDomRef() + "</div>");

而且没有用。有什么提示吗？

谢谢

Answer 1

创建复合控件可能比扩展单选按钮控件更容易 例如 https://jsbin.com/puqopam/edit?js,output

sap.ui.define([
'sap/ui/core/Control',
'sap/ui/model/json/JSONModel',
'sap/m/RadioButton',
'sap/m/Input'
], function (Control, JSONModel, RadioButton, Input) {
Control.extend('RadioButtonEx', {
metadata: {
aggregations: {
radio: { type: 'sap.m.RadioButton', multiple: false },
input: { type: 'sap.m.Input', multiple: false }
},
},
renderer: function (rm, oControl) {
rm.write('<div');
rm.writeControlData(oControl);
rm.write('>');
rm.write('<div>');
rm.renderControl(oControl.getAggregation('radio'));
rm.write('</div>');
rm.write('<div>');
rm.renderControl(oControl.getAggregation('input'));
rm.write('</div>');
rm.write('</div>');
}
});
var combo = new RadioButtonEx({
radio: new RadioButton({
text: "test"
}),
input: new Input()
});
combo.placeAt("content")
});