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

问题

I extended sap.ui.core.TooltipBase with mouseover event handling with creation of sap.m.QuickView which is attached to some sap.ui.core.Icon:

    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"));                           
            },
        });  
});

In my controller I added TooltipBase to sap.ui.core.Icon with id="filterButton":

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

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

I would like to get QuickView to be shown when I hover over this Icon, which is placed on the ChartContainer in the xml:

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

Hovering over this icon works well, alert("Event mouseover."); is shown, also QuickView is created correctly (I tried the same code on sap.m.Button), but I get error on this line in the sap.ui.core.TooltipBase.extend:

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

It is from this sap library:

And this line d = this._getOpenByDomRef(); returns null, but why I have no clue:

I am not sure if here is somenone who met this issue, but if yes I would be really glad.

回答1:

You are almost there. Just one issue.

As I mentioned in this below question: extending-sap-ui-core-icon-with-hover-event-or-mouseover, your custom Icon is getting converted into the OverflowButton:

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

What you probably missed is the fact that Id of your custom Icon is not used and a new auto-generated Id is created for Overflow Button (bad).

Hence, the Overflow button id is not : filterButton but some auto-generated Id.

Here is the solution: Change the code where you are opening QuickView in your custom control:

Previous Code:

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

Correct Code :

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

EDIT: In the code:

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

this refers to your custom tooltip. As tooltip is passed along to OverflowButton ( code above), tooltip parent is The overflow button. Hence, the code: this.getParent().

Also, I would suggest you to set the placement of your view to 'Bottom'. ( default is right and it was causing UI issues).

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

来源：https://stackoverflow.com/questions/41464115/extending-tooltipbase-with-qucikview-cause-error-sap-m-popover-id-is-opened-by

标签

sapui5

popover