javascript - SAPUI5如何通过扩展现有控件来创建自定义控件

我必须自定义现有控件（FacetFilter）的功能。我无法自定义FacetFilter渲染器的功能。你能帮我吗

我在xml中的代码是

<FacetFilter
    id="idFacetFilter"
    type="Simple"
    showPersonalization="true"
    showReset="true"
    reset="handleFacetFilterReset"
    lists="{/ProductCollectionStats/Filters}">
    <lists>
      <FacetFilterList
        title="{type}"
        key="{key}"
        active="false"
        multiselect="true"
        listClose="handleListClose"
        items="{values}" >
        <items>
          <FacetFilterItem
            text="{text}"
            key="{key}"
            count="{data}" />
        </items>
      </FacetFilterList>
    </lists>
 </FacetFilter>

我试图扩展控制，我尝试的代码如下，

jQuery.sap.declare("control.CustomFacetFilter");
sap.m.FacetFilter.extend("control.CustomFacetFilter", {});

我只是扩展了，因为我想要该控件的所有功能。我不想修改任何东西。我有渲染器文件，如下所示。

/*
* @copyright
*/

sap.ui.define(['jquery.sap.global'],
function(jQuery) {
"use strict";


/**
 * FacetFilter renderer.
 * @namespace
 */
var CustomFacetFilterRenderer = {
};


/**
 * Renders the HTML for the given control, using the provided {@link     sap.ui.core.RenderManager}.
 *
 * @param {sap.ui.core.RenderManager} oRm the RenderManager that can be used for writing to the render output buffer
 * @param {sap.ui.core.Control} oControl an object representation of the control that should be rendered
 */
CustomFacetFilterRenderer.render = function(oRm, oControl){
    switch (oControl.getType()) {

    case sap.m.FacetFilterType.Simple:
        CustomFacetFilterRenderer.renderSimpleFlow(oRm, oControl);
        break;

    case sap.m.FacetFilterType.Light:
        CustomFacetFilterRenderer.renderSummaryBar(oRm, oControl);
        break;
    }
};

/**
 *
 *
 * @param {sap.ui.core.RenderManager} oRm the RenderManager that can be used for writing to the render output buffer
 * @param {sap.ui.core.Control} oControl an object representation of the control that should be rendered
 */
CustomFacetFilterRenderer.renderSimpleFlow = function(oRm, oControl) {

    oRm.write("<div");
    oRm.writeControlData(oControl);
    oRm.addClass("sapMFF");

    if (oControl.getShowSummaryBar()) {

        oRm.write(">");
        CustomFacetFilterRenderer.renderSummaryBar(oRm, oControl);
    } else {

        if (oControl._lastScrolling) {

            oRm.addClass("sapMFFScrolling");
        } else {

            oRm.addClass("sapMFFNoScrolling");
        }

        if (oControl.getShowReset()) {

            oRm.addClass("sapMFFResetSpacer");
        }
        oRm.writeClasses();
        oRm.write(">");


        if (sap.ui.Device.system.desktop) {
            oRm.renderControl(oControl._getScrollingArrow("left"));
        }
/*          // dummy after focusable area.
        oRm.write("<div tabindex='-1'");
        oRm.writeAttribute("id", oControl.getId() + "-before");
        oRm.write("></div>");*/
        // Render the div for the carousel
        oRm.write("<div");
        oRm.writeAttribute("id", oControl.getId() + "-head");
        oRm.addClass("sapMFFHead");
        oRm.writeClasses();
        oRm.write(">");

        var aLists = oControl._getSequencedLists();
        for (var i = 0; i < aLists.length; i++) {

            oRm.renderControl(oControl._getButtonForList(aLists[i]));
            if (oControl.getShowPersonalization()) {

                oRm.renderControl(oControl._getFacetRemoveIcon(aLists[i]));
            }
        }

        if (oControl.getShowPersonalization()) {
            oRm.renderControl(oControl.getAggregation("addFacetButton"));
        }
        oRm.write("</div>"); // Close carousel div
        if (sap.ui.Device.system.desktop) {
            oRm.renderControl(oControl._getScrollingArrow("right"));
        }

        if (oControl.getShowReset()) {

            oRm.write("<div");
            oRm.addClass("sapMFFResetDiv");
            oRm.writeClasses();
            oRm.write(">");
            oRm.renderControl(oControl.getAggregation("resetButton"));
            oRm.write("</div>");
        }
    }
    oRm.write("</div>");
};


/**
 *
 *
 * @param {sap.ui.core.RenderManager} oRm the RenderManager that can be used for writing to the render output buffer
 * @param {sap.ui.core.Control} oControl an object representation of the control that should be rendered
 */
CustomFacetFilterRenderer.renderSummaryBar = function(oRm, oControl) {

    // We cannot just render the toolbar without the parent div.  Otherwise it is
    // not possible to switch type from light to simple.
    oRm.write("<div");
    oRm.writeControlData(oControl);
    oRm.addClass("sapMFF");
    oRm.writeClasses();
    oRm.write(">");
    var oSummaryBar = oControl.getAggregation("summaryBar");
    oRm.renderControl(oSummaryBar);
    oRm.write("</div>");
};


return CustomFacetFilterRenderer;

}, /* bExport= */ true);

我只是复制粘贴的代码，我在渲染器中修改了代码
当我运行这段代码时，找不到显示的lists.js，但是这里的列表是FacetFilter中的聚合。如果我们在xml中观察到，则FacetFilter是父项中最高级的，它有一个子项（FacetFilterList），而后者又有另一个子项（FacetFilterItem）。我已经在这里扩展了FacetFilter控件，这意味着我已经将FacetFilter的所有属性都添加到了我的CustromFilter吗？，但是仍然找不到其显示的lists.js。我很困惑如何在这种情况下创建自定义控件，请您帮我一下。

最佳答案

sap.ui.define(['./HerePathToFacetFilterRenderer', 'sap/ui/core/Renderer'],
function(FacetFilterRenderer, Renderer) {
"use strict";

    var CustomFacetFilterRenderer = Renderer.extend(FacetFilterRenderer);

    //... here your custom implementation, overwrite of base methods or hooks


return CustomFacetFilterRenderer;

}, /* bExport= */ true);

请参见从InputBase继承的TextAreaRenderer
https://github.com/SAP/openui5/blob/master/src/sap.m/src/sap/m/TextAreaRenderer.js

实际上，docu应该通过扩展现有控件的其他方式提供更多帮助
https://openui5.hana.ondemand.com/#docs/guide/bcee26a4801748f39bf5698d83d903aa.html