我将扩展 RadioButton 控件,以允许将图像添加到每个单选按钮中,并扩展 RadioButtonGroup 以允许将先前的扩展控件添加为聚合。
OBS: 缺少 css 类渲染,可以找到有关渲染器实现的更多详细信息here https://sapui5.hana.ondemand.com/#docs/guide/91f393916f4d1014b6dd926db0e91070.html.
假设:
- 命名空间定义为
my.app
在 - 的里面index.html
file
- 在项目文件夹(webapp 或 WebContents)内,您已为这些自定义控件创建了一个文件夹,名为
controls
单选按钮扩展
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);
RadioButtonGroup 扩展
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);