在Ext的GridPanel中添加鼠标悬停的效果

我们在进行前段开发时，通常会出现这样的问题：就是Ext的Grid每列可显示的字数不是很多，在为了布局漂亮而不改变每列宽度的前提下，我们可以给需要显示的列添加一个鼠标的悬停事件，添加一个QuickTips来显示详细的内容

renderer: function(value, metadata, record, rowIndex, columnIndex, store) {
                metadata.attr = 'ext:qtip="标签详细信息:<br/>' + value +'"';
                return value;
               }

这就是具体的实现代码，很简单吧 ！其实就是给这一列加上renderer。

函数中的value，就是我们获取到的值，所以我们只是添加了qtip，这样一来，grid里面显示的是不完全的结果，把鼠标放在上面之后就显示出了详细的内容！

对了，不要忘了，还需要加上这句话

Ext.QuickTips.init();

来显示qtip

给出ColumnModel中该列的定义

{
id : 'myTag',
header : '标签',
align : 'center',
dataIndex : 'tag',
sortable: true,
renderer: function(value, metadata, record, rowIndex, columnIndex, store) {
                metadata.attr = 'ext:qtip="标签详细信息:<br/>' + value +'"';
                return value;
               }
}