ExtJS表格列添加提示功能的实现方法详解

在ExtJS开发过程中，为表格列（column）添加提示功能是极为常见的需求，当鼠标悬停在单元格上时，能够显示额外信息，从而避免界面内容过于拥挤。实现这一效果的方法其实相当巧妙，核心在于利用渲染器（renderer）中的metaData.attr属性来动态嵌入提示内容。

先来看一下最终实现的效果：

整体思路是：在renderer函数内部，通过修改metaData.attr字符串，向其中添加一个ext:qtip属性，并将该属性的值设置为希望显示的提示文本。这样一来，ExtJS自带的qtips组件就会自动捕获该属性，并在鼠标悬停时呈现气泡提示框。

具体的代码实现如下：

renderer : function(value, metaData, record, rowIndex,
 colIndex, store) {
  // provide the logic depending on business rules
  // name of your own choosing to manipulate the cell
  // depending upon
  // the data in the underlying Record object.

  // metaData.css : String : A CSS class name to add
  // to the TD element of the cell.
  // metaData.attr : String : An html attribute
  // definition string to apply to
  // the data container element within the table
  // cell (e.g. 'style="color:red;"').
  metaData.attr = 'ext:qtip="' + value + '"';

  return value;
}

这段代码中最为核心的就是一行赋值：metaData.attr = 'ext:qtip="' + value + '"';。它直接将当前单元格的值作为气泡提示的内容。在实际项目中，你完全可以根据业务逻辑拼接更复杂的提示信息，例如引用数据记录中其他字段的值。此外，别忘了在页面中正确引入qtips.js文件（路径需根据实际项目调整），否则气泡样式将无法正常生效。

简单总结一下，这个技巧让表格列天然拥有了“弹窗解释”的能力，特别适用于展示长文本、状态说明或需要附加注释的数据。当你开发扩展性强的应用时，这个方法非常值得收藏和复用。