如何解决Extjs - 如何在面板的固定位置添加工具提示
我试图在多个面板项目的工具提示内显示一个菜单。因此,在悬停这些项目面板时,我想显示我的菜单按钮,该按钮将通过工具提示的方式显示。我能够做到这一点,但我无法在面板项目的右上角设置工具提示位置,因为工具提示始终显示在我将鼠标指针悬停在任何地方。我也尝试使用锚配置,但它只是将工具提示附加到父面板。 是否有任何配置来设置工具提示的位置或任何其他方法来实现此用例。
这是我的 fiddle。
解决方法
我能够通过使用配置 anchor: true
和 defaultAlign: 't100-r30'
以下是更新的小提琴代码:
var someButton = Ext.create({
xtype: 'button',text: 'Some button'
});
Ext.application({
name: 'Fiddle',launch: function () {
Ext.create({
id: 'parentPanel',height: 300,xtype: 'panel',title: 'parentPanel',items: [{
html: "<span style='font-size:20px;'>Hover mouse on this green panel</span>",bodyStyle: "background: lightgreen;",height: "50%",width: "70%",padding: "5 5",cls: 'overlayMenuCls'
},{
html: "<span style='font-size:20px;'>Hover mouse on this blue panel</span>",bodyStyle: "background: lightblue;",cls: 'overlayMenuCls'
}],listeners: {
boxready: {
fn: 'onPanelBeforeRender',scope: this
}
},layout: "vbox",renderTo: Ext.getBody()
});
},onPanelBeforeRender: function (view) {
var me = this;
console.log(view);
var tip = Ext.create('Ext.tip.ToolTip',{
target: view.el,delegate: '.overlayMenuCls',// trackMouse: true,anchor: true,dismissDelay: 0,defaultAlign: 't100-r30',items: [{
xtype: 'button',text: 'menu',cls: "overlayMenuCls",menu: {
items: [{
text: 1
},someButton]
},listeners: {
mouseover: function () {
tip.isItemOver = true;
},mouseout: function () {
tip.isItemOver = false;
}
}
}],listeners: {
beforeshow: function (tip) {
var button = tip.items.items[0];
var menu = button.menu;
console.log(tip.items.items[0]);
},beforehide: function (tip) {
if (tip.isItemOver) {
return false;
}
}
}
});
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。