ExtJS 4 Добавить всплывающие подсказки в переполненные клетки во всем проекте Ext.grid.Panel в

Question

TL; DR: Каков наилучший способ добавить дополнительный атрибут (data-qtip) к клеточному внутренним элементам DOM во всех проектах Ext.grid.Panel лет сразу.

Описание: Я хочу добавить всплывающие подсказки в переполненные ячейки во всем проекте Ext.grid.Panel с полным текстом.

добавить просто удлиняет к Ext.tip.QuickTip (так что я могу держать все параметры ячейки сетки всплывающих подсказок в одном месте) и вызвать Ext.tip.QuickTipManager.init() с его className (позже я хочу продлить/overrite Ext.tip.QuickTipManager работать с несколькими Ext.tip.QuickTip детей intances в то же время) :

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