Extending TooltipBase with QucikView cause error: 'sap.m.Popover id is opened by a control which isn't rendered yet."

Question

我通过创建附加到某些 sap.ui.core.Icon:

的 sap.m.QuickView 来扩展 sap.ui.core.TooltipBase 鼠标悬停事件处理

    sap.ui.define(function () {
    "use strict";
    return sap.ui.core.TooltipBase.extend("abc.reuseController.TooltipBase", { 
            metadata: {
                events: {
                    "onmouseover" : {}  
                }
            },
            oView: null,

            setView : function(view){
                this.oView = view;
            },

//          the hover event handler, it is called when the Button is hovered - no event registration required
            onmouseover : function() {
                this._createQuickView();
            },

            _createQuickView: function(){
                var view = this.oView;
                alert("Event mouseover.");

//              create QuickViewGroupElement
                var oQuickViewGroupElement = new sap.m.QuickViewGroupElement();
                oQuickViewGroupElement.setLabel("item");
                oQuickViewGroupElement.setValue("value");

//              create QuickViewGroup
                var oQuickViewGroup = new sap.m.QuickViewGroup();
                oQuickViewGroup.addElement(oQuickViewGroupElement);

//              create QuickViewPage
                var oQuickViewPage = new sap.m.QuickViewPage();
                oQuickViewPage.addGroup(oQuickViewGroup);

//              create QuickView
                var oQuickView = new sap.m.QuickView();
                oQuickView.addPage(oQuickViewPage); 

//              connect QuickView with Button
                oQuickView.openBy(view.byId("filterButton"));                           
            },
        });  
});

在我的控制器中，我将 TooltipBase 添加到 sap.ui.core.Icon with id="filterButton":

var oTooltipBase = new TooltipBase();           
oTooltipBase.setView(this.getView());   

var oIconFilterButton = this.byId("filterButton");
oIconFilterButton.setTooltip(oTooltipBase);

我希望当我将鼠标悬停在这个图标上时显示 QuickView，它位于 xml 中的 ChartContainer 上：

<suite:customIcons>                 
   <core:Icon id="filterButton" src="sap-icon://drop-down-list" press="onFilterDialogOpen" width="2em"/> 
</suite:customIcons>

将鼠标悬停在这个图标上效果很好，alert("Event mouseover.");已显示，QuickView 也已正确创建（我在 sap.m.Button 上尝试了相同的代码），但我在 sap.ui.core.TooltipBase.extend:

的这一行出现错误

oQuickView.openBy(view.byId("filterButton"));

来自这个 sap 库：

而这一行 d = this._getOpenByDomRef(); returns null，但我不知道为什么：

我不确定这里是否有人遇到过这个问题，但如果是的话我会很高兴。

Answer 1

你快到了。只有一期。

正如我在下面这个问题中提到的：，您的自定义图标正在转换为溢出按钮：

sap.suite.ui.commons.ChartContainer.prototype._addButtonToCustomIcons = function(i) {
    var I = i;
    var s = I.getTooltip();
    var b = new sap.m.OverflowToolbarButton({
        icon: I.getSrc(),
        text: s,
        tooltip: s,
        type: sap.m.ButtonType.Transparent,
        width: "3rem",
        press: [{
            icon: I
        }, this._onOverflowToolbarButtonPress.bind(this)]
    });
    this._aCustomIcons.push(b);
}

您可能错过的事实是您的自定义图标的 ID 未被使用，并且为溢出按钮创建了一个新的自动生成的 ID（错误）。

因此，溢出按钮 ID 不是：filterButton，而是一些自动生成的 ID。

解决方法如下：更改您在自定义控件中打开 QuickView 的代码：

前一个代码：

//              connect QuickView with Button
            oQuickView.openBy(view.byId("filterButton"));

正确代码：

//              connect QuickView with Button
                oQuickView.openBy(this.getParent());

编辑：在代码中：

 //              connect QuickView with Button
                    oQuickView.openBy(this.getParent());

这是指您的自定义工具提示。当工具提示传递给 OverflowButton（上面的代码）时，工具提示父级是溢出按钮。因此，代码：this.getParent().

此外，我建议您将视图的位置设置为 'Bottom'。（默认是正确的，它导致 UI 问题）。

//              create QuickView
                var oQuickView = new sap.m.QuickView({placement:"Bottom"});
                oQuickView.addPage(oQuickViewPage);

Extending TooltipBase with QucikView cause error: 'sap.m.Popover id is opened by a control which isn't rendered yet."

Extending TooltipBase with QucikView cause error: 'sap.m.Popover id is opened by a control which isn't rendered yet."

sapui5

popover