用QucikView扩展TooltipBase会导致错误:"sap.m.Popover ID由尚未呈现的控件打开." [英] Extending TooltipBase with QucikView cause error: 'sap.m.Popover id is opened by a control which isn't rendered yet."
问题描述
我通过创建与附加在某些sap.ui.core.Icon上的sap.m.QuickView的鼠标悬停事件处理扩展了sap.ui.core.TooltipBase:
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"));
},
});
});
在我的控制器中,我使用id ="filterButton"将TooltipBase添加到了sap.ui.core.Icon中:
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);
当我将鼠标悬停在xml的ChartContainer上的该图标上时,我希望显示QuickView:
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>
将鼠标悬停在此图标上效果很好,alert("Event mouseover.").如图所示,还正确创建了QuickView(我在sap.m.Button上尝试了相同的代码),但是在sap.ui.core.TooltipBase.extend的这一行出现错误:
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"));
它来自这个树液库:
这行d = this._getOpenByDomRef();返回null,但为什么我不知道:
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.
推荐答案
您快到了.只是一个问题.
You are almost there. Just one issue.
正如我在以下问题中提到的: exting-sap-ui-core-icon-with-hover-event-or-mouseover ,您的自定义图标将被转换为OverflowButton:
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);
}
您可能会错过的事实是没有使用自定义图标的ID,而是为溢出按钮"创建了一个新的自动生成的ID(错误).
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).
因此,溢出"按钮的ID不是:filterButton而是一些自动生成的ID.
Hence, the Overflow button id is not : filterButton but some auto-generated Id.
这是解决方案:在自定义控件中打开QuickView的位置更改代码:
Here is the solution: Change the code where you are opening QuickView in your custom control:
先前的代码:
// 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().
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().
此外,我建议您将视图的位置设置为底部". (默认是正确的,这会导致UI问题.)
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);
这篇关于用QucikView扩展TooltipBase会导致错误:"sap.m.Popover ID由尚未呈现的控件打开."的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!