Question

TL; DR：在所有项目Ext.grid.Panel中向单元格内部DOM元素添加其他属性（data-qtip）的最佳方法是什么？马上。

说明：我想在所有项目Ext.grid.Panel中添加工具提示以及溢出的单元格。

我将简单扩展添加到Ext.tip.QuickTip（因此我可以将所有网格单元工具提示设置保存在一个位置）并使用className调用Ext.tip.QuickTipManager.init()（稍后我想扩展/覆盖{ {1}}同时处理多个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;
    }
});

但是我如何能够立即向所有项目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

1 个答案: