自定义控件——如何在另一个控件中封装聚合

Question

我可能会绕过这个错误，但我想创建一个自定义控件，它是 sap.m.Dialog 的子类。这个新控件将有一个聚合 'leftImage'，然后将其放置在 HorizontalLayout（私有变量）中。但是，这可能会导致错误，因为 'leftImage' 已经是我控制的依赖项。

那么如何在另一个控件上封装聚合？

Answer 1

sap.m.Dialog 已经有一个 "content" 聚合，其中包含要呈现的控件，因此您只需要在那里添加自定义位即可。

所以，这样的模式应该有效：

sap.ui.define([
    "jquery.sap.global",
    "sap/m/Dialog",
    "sap/m/Image",
    "sap/ui/layout/HorizontalLayout"
], function(jQuery, Dialog, Image, HorizontalLayout) {
    "use strict";

    var MyDialog = Dialog.extend("sap.ui.mylib.MyDialog", {
        metadata: {
            library: "sap.ui.mylib",
            associations: {
                leftImage: {type: "sap.m.Image", multiple: false}
            }
        },
        renderer: {
            // inherit rendering from sap.m.Dialog
        }
    });

    MyDialog.prototype.init = function() {
        if (Dialog.prototype.init) {
            Dialog.prototype.init.apply(this, arguments);
        }

        var oImage = new Image({
                src: '...'
            }),
            oHorizontalLayout = new HorizontalLayout({
                content: [
                    oImage
                ]
            });

        this.addContent(oHorizontalLayout);
    };

    return MyDialog;
}, /* bExport= */ true);

定义leftImage为关联，因为它会被HorizontalLayout聚合。稍后可以通过以下方式访问它：

var oLeftImage = sap.ui.getCore().byId(oMyDialog.getLeftImage());

您可能还想将 HorizontalLayout 定义为关联，这样您也可以向其中添加更多内容。

自定义控件——如何在另一个控件中封装聚合

Custom Control - how to encapsulate aggregation in another control

javascript

custom-controls

aggregation

sapui5