我必须自定义现有控件(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