我试图在多个面板项目的工具提示中显示菜单。所以在这些项目面板上悬停时,我想显示我的菜单按钮,它将以工具提示的方式显示。我可以做到这一点,但我无法将工具提示位置设置在我的面板项目的右上角,因为工具提示总是显示在我悬停鼠标指针的任何地方。我还尝试使用锚配置,但它只是将工具提示附加到父面板上。是否有任何配置来设置工具提示的位置或任何其他方法来实现此用例。这是我的小提琴。
vaj7vani1#
我可以使用配置anchor: true和defaultAlign: 't100-r30'将工具提示的位置固定在面板的右上角下面是更新后的小提琴代码:
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;", xtype: 'panel', 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;", xtype: 'panel', height: "50%", width: "70%", padding: "5 5", 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; } } } }); }});
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;",
}],
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',
text: 'menu',
cls: "overlayMenuCls",
menu: {
text: 1
}, someButton]
mouseover: function () {
tip.isItemOver = true;
mouseout: function () {
tip.isItemOver = false;
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;
1条答案
按热度按时间vaj7vani1#
我可以使用配置
anchor: true
和defaultAlign: 't100-r30'
将工具提示的位置固定在面板的右上角下面是更新后的小提琴代码: