如何使用ExtJs为表格单元格增加Tooltips(QuickTips)浮动信息

ExtJs证实了其十分强大的界面定制能力，其中的提供的ToolTips功能比HTML里的如下语句定制性更强，完全可以代替如下功能

<a href="http://dfdfd" title="TIPS">Some Text</a>

ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的，其中Ext.ToolTip的定制功能很强，具体效果可以参考，具体配置代码如下，

9<link rel="stylesheet" type="text/css" href="ext-2.1/resources/css/ext-all.css" />

<script type="text/javascript" src="ext-2.1/ext-base.js"> </script>

<script type="text/javascript" src="ext-2.1/ext-all.js"> </script>

然后再在header里对Ext.QuickTips配置

Ext.QuickTips.init(); 是必须的

Ext.apply(Ext.QuickTips.getQuickTip(),{...}); 是可选的，如果你想使用缺省配置，就完全可以省略掉这一段。

maxWidth 最大宽度

minWidth 最小宽度

showDelay 延时显示（毫秒）

trackMouse 随着鼠标移动

hideDelay 延时自动隐藏 （缺省为true）

closable 显示关闭图标（但是这个图标显然只是一个样子，鼠标点击不到它！）

autoHide 自动隐藏 （这个配置没用处，不管是真是假，都自动隐藏，实际需要用下面的dismissDelay来控制）

draggable 支持用鼠标拖动（实际上这个选项也不起作用，因为鼠标根本移动不到这里！）

dismissDelay 这个才是最有用的选项，否则你完全可以省掉这段Ext.apply的配置。因为缺省情况下这个浮动提示是经过一段时间以后就自动隐藏。只有通过设置这个值为0来关闭自动隐藏浮动提示！

<script type="text/javascript">

Ext.QuickTips.init();

</script>

最后在body里增加对Ext.QuickTips的引用，qtitile可以视情况而定可以省掉而仅仅保留qtip，在qtip里增加绑定内容。

<input type="button" value="OK"

class="tip-target" ext:qtitle="OK Button" ext:qtip="This is a quick tip from markup!">

</input>

<asp:ListView >

<ItemTemplate>

<div id="sample"

ext:qtitle='<%# Eval("TipsTitleField") %>' ext:qtip='<%# Eval("TipsField") %>'>

</div>

</ItemTemplate>

</asp:ListView>