Question

我尝试在tooltip内部的元素中使用iframe（由htmleditor组件生成）。

我正在尝试：

Ext.tip.QuickTipManager.init();

Ext.create('Ext.form.HtmlEditor', {
    width: 750,
    height: 250,
    renderTo: Ext.getBody(),
    listeners: {
        afterrender: function () {
            this.getToolbar().add([{
                xtype: "combobox",
                flex: 1,
                displayField: "name",
                valueField: "value",
                store: {
                    data: [{
                        name: "#NAME# (User's name)",
                        value: "#NAME#"
                    }]
                }
            }, {
                xtype: "button",
                text: "Add",
                handler: function () {
                    var value = this.prev().getValue();
                    var htmlEditor = this.up("htmleditor");
                    if (value) {
                        var id = Ext.id();
                        value = "<span id=\"" + id + "\" style=\"cursor:pointer;\">" + value + "</span>";

                        htmlEditor.insertAtCursor(value);

                        var doc = htmlEditor.getDoc();
                        var elSpan = doc.getElementById(id);

                        var tTip = Ext.create("Ext.tip.ToolTip", {
                            html: "User's name tooltip.",
                            shadow: false,
                            scope: doc
                        });

                        elSpan.addEventListener("mouseover", function () {
                            tTip.showAt(elSpan.offsetLeft, elSpan.offsetTop)
                        });

                        elSpan.addEventListener("mouseleave", function () {
                            tTip.hide();
                        });
                    }
                }
            }])
        }
    }
});

但是，当显示组件时，它出现在错误的位置。请看小提琴。

Sencha Fiddle：https://fiddle.sencha.com/#view/editor&fiddle/1vj4

Answer 1

我找到了解决方案！

elSpan.addEventListener("mouseover", function (e) {
    var x = e.pageX;
    var y = e.pageY;
    var region = htmlEditor.getRegion();

    x += region.x;
    y += region.y;

    tTip.showAt([x, y]);
});

ExtJS在iframe中的元素中添加工具提示

1 个答案: