Extjs - Как добавить всплывающую подсказку в фиксированном положении на панели

#javascript #extjs #extjs6

Вопрос:

Я пытаюсь показать меню внутри всплывающей подсказки для нескольких элементов панели. Поэтому при наведении курсора мыши на эти панели элементов я хочу показать свою кнопку меню, которая будет отображаться с помощью всплывающей подсказки. Мне многое удалось сделать, но я не могу установить расположение всплывающей подсказки в правом верхнем углу элементов моих панелей, так как всплывающая подсказка всегда отображается везде, где я навожу указатель мыши. Также я попытался использовать конфигурацию привязки, но она просто прикрепляет всплывающую подсказку к родительской панели. Существует ли какая-либо конфигурация для установки положения всплывающей подсказки или любой другой подход для достижения этого варианта использования.

Вот моя скрипка.

1. Вам может помочь настройка alignTarget или метод showAt.

2. Поскольку моя всплывающая подсказка не является плавающей, поэтому ‘alignTarget’ может не работать, поскольку в описании указано, что она должна быть плавающей, и я попытался использовать метод ‘showAt’ в событиях beforeshow и show, но всплывающая подсказка по-прежнему отображается рядом с указателем.

3. я предполагаю, что это плавающий cmp, но может быть и другой вариант: вы пробовали anchor и trackMouse false? при этом подсказка будет отображаться в статическом положении. getAlignRegion() выглядит как метод, вызываемый перед отображением подсказки. docs.sencha.com/extjs/6.5.3/classic /…

4. ДА. Я попытался использовать anchor, который переводит всплывающую подсказку в статическое положение, но она выходит за пределы панели, а значение trackMouse уже равно false, поскольку всплывающая подсказка не следует за указателем все время.

Ответ №1:

Я смог зафиксировать положение всплывающей подсказки в правом верхнем углу панели с помощью конфигураций 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;
                    }
                }
            }
        });
    }
});