ExtJS 4 向所有项目 Ext.grid.Panel 中的溢出单元格添加工具提示

Question

TL;DR: 向单元格内部 DOM 元素 添加附加属性 (data-qtip) 的最佳方法是什么所有项目Ext.grid.Panel一次。

描述：我想在所有项目 Ext.grid.Panel 的溢出单元格中添加工具提示，并附上全文。

我将简单扩展添加到 Ext.tip.QuickTip (so I can keep all grid cell tooltip settings in one place) and call Ext.tip.QuickTipManager.init() 及其 className（稍后我想扩展/覆盖 Ext.tip.QuickTipManager 以同时处理多个 Ext.tip.QuickTip 子实例） :

Ext.define('Ext.lib.extensions.PortalGridCellTooltip', {
    extend: 'Ext.tip.QuickTip',
    alias: 'widget.portalGridCellTooltip',
    alternateClassName: 'Portal.PortalGridCellTooltip',

    tagConfig: {
        namespace: 'data-',
        attribute: 'gctip',
        width: 'gcwidth',
        target: 'target',
        title: 'gctitle',
        hide: 'hide',
        cls: 'gcclass',
        align: 'gcalign',
        anchor: 'anchor',
        showDelay: 'gcshowDelay'
    },

    onTargetOver: function (element) {
        var target = element.getTarget(this.delegate);

        if (!this.isOverflowed(target)) {
            return;
        }

        this.callParent(arguments);
    },

    /**
     * Check if passed element is overflowed with its content
     * @param element
     * @returns {boolean}
     */
    isOverflowed: function (element) {
        var curOverflow = element.style.overflow;

        if (!curOverflow || curOverflow === "visible")
            element.style.overflow = "hidden";

        var isOverflowing = element.clientWidth < element.scrollWidth
            || element.clientHeight < element.scrollHeight;

        element.style.overflow = curOverflow;

        return isOverflowing;
    }
});

我可以使用列渲染器添加此工具提示：

renderer: function (value, meta) {
    meta.tdAttr = 'data-gctip="' + value + '"';
    return value;
}

但是我如何才能同时向所有项目 Ext.grid.Panel 添加工具提示？当然，解决方案必须与现有的列渲染一起使用。我将非常感谢您的专业建议。

Answer 1

看看这个 ToolTip，它适用于任何 Ext.grid.Panel:

 Ext.create('Ext.tip.ToolTip', {
            target: Ext.getBody(),

            delegate: '.x-grid-cell',

            trackMouse: true,

            defaultAlign: 'l-l',

            renderTo: Ext.getBody(),

            listeners: {
                beforeshow: function(tip) {
                    var textEl = Ext.get(tip.triggerElement).down('.x-grid-cell-inner'),
                        text = textEl && textEl.dom && Ext.String.trim(textEl.dom.textContent || textEl.dom.innerText || ''),
                        triggerColumn = Ext.get(tip.triggerElement),
                        columnWidth = triggerColumn && triggerColumn.getSize().width,
                        textWidth = textEl && textEl.getSize().width,
                        grid = Ext.get(tip.triggerElement).up('.x-grid'),
                        view = grid && grid.dom && Ext.getCmp(grid.dom.id).getView(),
                        header = view && view.getHeaderByCell(tip.triggerElement),
                        renderer = header && !header.isXType('templatecolumn') && header.renderer,
                        record = view && view.getRecord(tip.triggerElement.parentNode),
                        encodedText = view && !view.isXType('tableview') && !view.isXType('treeview') && renderer ? renderer.call(header, text, {}, record, null, null, grid.getStore()) : text;

                    if (!encodedText || !text || !textEl || !textWidth || (columnWidth > Ext.util.TextMetrics.measure(textEl, encodedText).width)) {
                        return false;
                    }


                    tip.update(encodedText);
                }
            }
        });

一个工作示例：https://fiddle.sencha.com/#fiddle/1dlj

要向 td 添加数据属性，您可以覆盖 Ext.grid.column.Column:

initComponent: function() {
    var renderer;

    this.callParent(arguments);

    renderer = this.renderer || function(value) {
        return value;
    };

    this.renderer = function(value, meta) {
        meta.tdAttr = 'data-qtip="' + value + '"';

        return renderer.apply(this, arguments);
    };
}

工作示例：https://fiddle.sencha.com/#fiddle/1dn5

ExtJS 4 向所有项目 Ext.grid.Panel 中的溢出单元格添加工具提示

ExtJS 4 Add tooltips to overflowed cells in all project Ext.grid.Panel's

extjs

extjs4