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

Question

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

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

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>");

这无法按照我想要的方式工作，因为我看到诸如“ Element sap.m.Input #__ input22”之类的文本被附加到控件中。我试图做这样的事情：

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

没用。有提示吗？

谢谢

Answer 1

创建复合控件比扩展RadioButton控件要容易。例如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")
});