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

Question

我必须定制现有控件（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。我很困惑如何在这种情况下创建自定义控件，你可以帮我在这个。

Answer 1

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

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

其实实况应该帮助更多以扩展现有的控制 的其他方式https://openui5.hana.ondemand.com/#docs/guide/bcee26a4801748f39bf5698d83d903aa.html