Extjs -如何在面板上的固定位置添加工具提示

bxgwgixi  于 2022-11-04  发布在  其他
关注(0)|答案(1)|浏览(185)

我试图在多个面板项目的工具提示中显示菜单。所以在这些项目面板上悬停时,我想显示我的菜单按钮,它将以工具提示的方式显示。我可以做到这一点,但我无法将工具提示位置设置在我的面板项目的右上角,因为工具提示总是显示在我悬停鼠标指针的任何地方。我还尝试使用锚配置,但它只是将工具提示附加到父面板上。是否有任何配置来设置工具提示的位置或任何其他方法来实现此用例。
这是我的小提琴。

vaj7vani

vaj7vani1#

我可以使用配置anchor: truedefaultAlign: '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;
                    }
                }
            }
        });
    }
});

相关问题