Ext Column 使用Tootip显示内容

使用Ext.grid.Panel时，有时遇到列内容过多，单元格显示不下的情况，我们可以利用Tootip 当鼠标移入时显示全部内容。

如下图:

代码如下:

{    
    text: 'Column Header Blah',
    dataIndex: 'blah',
    renderer: function(value, metaData, record, rowIdx, colIdx, store) {
        metaData.tdAttr = 'data-qtip="' + value + '"';
        return value;
    }
}

如果内容含有HTML则需要格式化

{
    renderer: function(value, metaData, record, rowIdx, colIdx, store) {
        // Sample value: msimms & Co. "like" putting <code> tags around your code

        value = Ext.String.htmlEncode(value);

        // "double-encode" before adding it as a data-qtip attribute
        metaData.tdAttr = 'data-qtip="' + Ext.String.htmlEncode(value) + '"';

        return value;
    }
}

另附一些其它解决方案: https://www.sencha.com/forum/showthread.php?179016-Grid-cell-tooltip