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);

我只是复制粘贴的代码，我在渲染器中修改了代码当我运行此代码时，找不到它的显示列表.js，但这里的列表是 FacetFilter 中的聚合。如果我们在 xml 中观察到，FacetFilter 是最顶级的父级，它有一个子项（FacetFilterList），而子项又具有另一个子项（FacetFilterItem）。我已经在这里扩展了控件 FacetFilter，这意味着我将 FacetFilter 的所有属性都带到了我的 CustromFilter 中，但它的显示列表.js仍然找不到。我混淆了如何在这种情况下创建自定义控件，您能否帮助我。