Extjs

Question

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

这是我的fiddle。

Answer 1

我能够通过使用配置 anchor: true 和 defaultAlign: 't100-r30'

将工具提示的位置固定到面板的右上角

下面是更新后的 fiddle 代码：

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

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

Extjs - How to add a tooltip at a fixed position on panel

javascript

extjs6