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

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

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

我在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>

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

/*
* @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);

/*
*@版权所有
*/
define（['jquery.sap.global']，
函数（jQuery）{
“严格使用”；
/**
*FaceFilter渲染器。
*@名称空间
*/
var customFaceFilterRenderer={
};
/**
*使用提供的{@link sap.ui.core.RenderManager}呈现给定控件的HTML。
* 
*@param{sap.ui.core.RenderManager}格式化可用于写入渲染输出缓冲区的RenderManager
*@param{sap.ui.core.Control}oControl应该呈现的控件的对象表示形式
*/
CustomFaceFilterRenderer.render=函数（oRm，oControl）{
开关（oControl.getType（））{
案例sap.m.FaceFilterType.Simple：
renderSimpleFlow（oRm，oControl）；
打破
案例sap.m.FaceFilterType.Light：
CustomFaceFilterRenderer.renderSummaryBar（oRm，oControl）；
打破
}
};
/**
* 
* 
*@param{sap.ui.core.RenderManager}格式化可用于写入渲染输出缓冲区的RenderManager
*@param{sap.ui.core.Control}oControl应该呈现的控件的对象表示形式
*/
CustomFaceFilterRenderer.renderSimpleFlow=函数（oRm，oControl）{
oRm.写（“”）；
CustomFaceFilterRenderer.renderSummaryBar（oRm，oControl）；
}否则{
如果（oControl.\u上次滚动）{
表格addClass（“SAPMFFSCROLING”）；
}否则{
表格addClass（“SAPMFNOSCROLLING”）；
}
if（oControl.getShowReset（））{
Form.addClass（“SAPMFresetSpacer”）；
}
oRm.writeClasses（）；
oRm.写（“>”）；
if（sap.ui.Device.system.desktop）{
oRm.renderControl（oControl._getScrollingArrow（“左”）；
}
/*//可聚焦区域后的虚拟。
oRm.写（“”）*/
//为旋转木马渲染div
oRm.写（“”）；
var aLists=oControl._getSequencedList（）；
对于（var i=0；i

我只是简单地复制粘贴代码，我修改了渲染器中的代码 当我运行这段代码时，找不到它的showing lists.js，但这里的lists是FacetFilter中的聚合。如果我们在xml中观察到，FacetFilter是最顶层的父项，它有一个子项（FacetFilterList），而子项又有另一个子项（FacetFilterItem）。我已经在这里扩展了控件FacetFilter，这意味着我将FacetFilter的所有属性都添加到了我的CustromFilter？中，但仍然没有找到它的showing 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

实际上，docu应该在扩展现有控件的另一种方式上提供更多帮助

---

您好，谢谢您的回复，我尝试了您提到的方式，但我发现以下错误。未捕获错误：未能从resources/sap/m/lists.js:404加载“sap/m/lists.js”-找不到资源！。它在本地资源中寻找聚合，但它应该在sap库中寻找聚合，我不明白为什么会发生这种情况。你能告诉我如何将它重定向到sapui5库吗