ExtJS 4将工具提示添加到所有项目Ext.grid.Panel'；s

TL；DR:在所有project Ext.grid.Panel的单元格内部DOM元素中添加附加属性（

数据qtip

）的最佳方法是什么

说明：我想在所有项目Ext.grid.面板中的溢出单元格中添加工具提示，并显示全文

我将简单扩展添加到（因此我可以将所有网格单元工具提示设置保留在一个位置），并使用其

类名调用
（稍后我要扩展/覆盖
Ext.tip.QuickTipManager
，以同时处理多个
Ext.tip.QuickTip
子实体）：

但我如何能一次向所有project Ext.grid.Panel添加工具提示？当然，解决方案必须与列的现有呈现一起使用。非常感谢您的专业建议。
请查看此
工具提示，它适用于任何
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);
                }
            }
        });

一个有效的例子：


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

工作示例：
有趣的解决方案！Thx，我试试。我这里有个bug，
me.el.parent（）
为空。@SergeyNovikov你能创建一个提琴吗？不能在提琴中复制，我将在我的项目中尝试更深入地研究这个问题。事实上我问过你猜原因是什么。无论如何，这是一个很好的解决方案。但如果我们讨论我的问题，请您建议覆盖网格（视图？），这样我就可以将
数据qtip
添加到所有项目网格中的单元格中。还是太糟糕了？
 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);
                }
            }
        });

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