扩展控件重用它自己的原始渲染器

Question

我的应用程序中需要一个自定义控件，由一个 ColumnListItem 后跟一个跨越所有 ColumnListItem 宽度的（自定义）进度条组成。我尝试扩展 sap/m/ColumnListItem 添加新的自定义聚合 progress 并利用其原始 renderer 如下：

sap.ui.define([
  "sap/m/ColumnListItem",
  "sap/m/ColumnListItemRenderer"
], function (ColumnListItem, ColumnListItemRenderer) {
  "use strict";
  return ColumnListItem.extend("my.package.MyColumListItem", {
    metadata: {
      aggregations: {
        "progress": {
          type: "my.package.MyShadowBar",
          multiple: false
        }
      }
    },
    renderer: {
      apiVersion: 2,
      render: function (oRm, oCLI) {
        ColumnListItemRenderer.render.apply(this, arguments);
        oRm.openStart("div").style("width", "100vw").openEnd();
        oRm.renderControl(oCLI.getAggregation("progress"));
        oRm.close("div");
      }
    }
  });
});

不幸的是，这仅在第一次呈现时有效：如果我导航到其他地方然后返回，所有进度条都呈现在页面顶部，所有 ColumnListItems 都堆叠在底部。我正在使用 SAPUI5 版本 1.84.xx。我真的不明白如何正确实现渲染器，所以欢迎任何建议！

Answer 1

SAPUI5 在技术上允许从父控件的相应 *Renderer 模块覆盖现有方法。除了自动测试之外，请确保仅使用 @protected/@public JSDoc 标记 覆盖那些方法，以使您的应用与未来的 UI5 版本保持兼容。这是一个如何通过覆盖受保护的 addOuterClasses 方法来扩展 InputRenderer 的示例：.

也可以在外部渲染器中扩展父级 *Renderer，如 API reference Renderer.extend 所述。扩展定义保持不变。

在您的情况下，听起来无需扩展 sap.m.ColumnListItem 即可实现要求。无论哪种方式，这里有一个 minimal sample that showcases both approaches：通过扩展项渲染器渲染进度条，并通过没有任何扩展的标准 popin 方法渲染进度条。

扩展控件重用它自己的原始渲染器

Extending a control reusing its own original renderer

controls

renderer

sapui5