Sapui5 向单选按钮组中的每个单选按钮添加图片

我想实现一个单选按钮组，其中每个单选按钮旁边都有一张图片（在单选按钮的左侧）

可能吗？如果是，怎么做

html:

调用此功能3次（对于每个单选按钮）：

---

我将扩展RadioButton控件以允许在每个单选按钮中添加图像，并扩展RadioButtonGroup以允许将以前的扩展控件添加为聚合

OBS：缺少css类渲染，可以找到有关渲染器实现的更多详细信息

假设：

命名空间在

index.html

文件中定义为

my.app

在项目文件夹（webapp或WebContent）中，您已经为这些自定义控件创建了一个名为

controls

单选按钮分机 RadioButtonGroup扩展名

---

非常感谢你的回答。我看过你的第一个解决方案，但我不确定它是否符合我的需要。让我解释一下。上面附加的当前html不适用于单选按钮组。相反，它有3个单选按钮。我想把它们组合成一个单选按钮组（单选组）。因此，我可能需要创建一个名为placeRadioGroupAt（）的方法。我如何创建这个方法，应该给哪个div？提醒您，我希望这一元素（单选组）中的所有3个单选按钮旁边都有一张图片。@Matoy:我已根据您的评论更新了我的答案。我完全通过了细节，它应该是一个单选按钮组。这应该适合你。@Cassio:我按照你的步骤创建了自定义控件。但是代码进入了一个连续循环并导致：堆栈溢出！！（：P）。错误：未捕获范围错误：超过最大调用堆栈大小。我认为这是因为代码行：

oRm.renderControl（oControl）这会一次又一次地导致渲染器方法本身。我们需要调用RadioButtonRenderer，而不是其自身的renderer方法。@RahulBhardwaj:正确！谢谢你指出这一点。我刚刚更正了答案。0否决票这不起作用。。我从./controls/RadioButtonGroupRenderer.js中得到一个错误“在负缓存中找到：'CompleteSurvey/controls/RadioButtonGroupRenderer.js'：404-未找到”。以下是我如何在视图中实现它；xmlns:ri=“CompleteSurvey.controls”看看这个答案：这样，图像可以在
<div class="form-group" show-errors>
    <label class="col-md-2 control-label metric-light-16-black pay-form-label">Payment Method</label>
    <div class="col-md-10" id="rdPaymentMethod">
        <label class="radio-group col-md-2">
            <span id="radio-group-1" style="margin-left: 0cm;"></span>
            <span class="radio" style="margin-left: 0cm;" />
            <img src="assets/images/card-mastercard.png" style="margin-left: 0cm;"/>

        </label>

        <label class="radio-group col-md-2">
            <span id="radio-group-2" style="margin-left: 0cm;"></span>
            <span class="radio"/>
            <img src="assets/images/card-viza.png"/>
        </label>

        <label class="radio-group col-md-2">
            <span id="radio-group-3" style="margin-left: 0cm;"></span>
            <span class="radio"/>
            <img src="assets/images/card-paypal.png"/>
        </label>
    </div>
</div>

var placeRadioButtonAt = function(radioButtonId, containingDivId, selected) {
    elements.push(radioButtonId);
    var oRB1 = new sap.ui.commons.RadioButton(radioButtonId, {
        selected : (selected==true),
        select : function() {}
    });

    oRB1.placeAt(containingDivId);
}

    placeRadioButtonAt("radio1","radio-group-1",true);
    placeRadioButtonAt("radio2","radio-group-2");
    placeRadioButtonAt("radio3","radio-group-3");

sap.ui.define(['jquery.sap.global', 'sap/m/Image', 'sap/m/RadioButton'

], function (jQuery, Image, RadioButton) {
    "use strict";

    var CustomRadioButton = RadioButton.extend("my.app.controls.RadioButtonImage", {
        metadata: {
            "properties": {
                "imageSrc": "string"
            },
        },
        renderer: function (oRm, oControl) {
            var oImg = new Image({ src: oControl.getProperty("imageSrc") })
            oRm.renderControl(oImg);
            sap.m.RadioButtonRenderer.render(oRm,oControl);
        }
    });

    return CustomRadioButton;
}, true);

sap.ui.define(['jquery.sap.global', 'sap/m/RadioButtonGroup'

], function (jQuery, RadioButtonGroup) {
    "use strict";

    var CustomRadioButtonGroup = RadioButtonGroup.extend("my.app.controls.RadioButtonGroup", {
        metadata: {
            aggregations: {
                buttons : {type : "my.app.controls.RadioButtonImage", multiple : true, singularName : "button", bindable : "bindable"}
            },
            defaultAggregation : "buttons",
        }
    });

    return CustomRadioButtonGroup;
}, true);