时间戳

首页 > 解决方案 > 如何将 SAP UI5 控件附加到单选按钮控件

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

问题描述

我有一个扩展 sap.m.RadioButton 的自定义单选按钮 js 类。在它的属性中我有一个控件，我想将该控件附加到单选按钮。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>");

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

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

并没有工作。有小费吗 ？

谢谢你

标签： sapui5

解决方案

创建复合控件可能比扩展 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")
});

推荐阅读