详解extjs的Tooltips与QuickTips
它们都是实现浮动提示功能的，当鼠标移过目标元素时，提供需要显示的附加信息。
首先看一下它们的集成体系:Ext.QuickTips继承Ext.Tooltips
Ext.Tooltips集成Ext.Tips
Ext.Tips继承Ext.Panel
说到底它还是个Panel，原来都是写Tooltips，后来发现要配置许多项，很麻烦，所以QuickTips的出现简化了配置。
所以当QuickTips能满足我们的需求时干嘛还去用Tooltips呢
要使用QuickTips必须在使用前写这么一句：Ext.QuickTips.init();QuickTips是单例的，这句代码是为了告诉ext我们要用悬浮提示功能，马上给我初始化tips,
Quicktips可以通过标签的属性直接在标签中配置，或者通过编程使用register方法来使用，下面介绍下这两种方法的使用
（一）使用QuickTips的register方法
Ext.apply(Ext.QuickTips.getQuickTip(),{配置选项}); 是可选的，如果你想使用缺省配置，就完全可以省略掉这一段。
QuickTip是单态的，Ext.QuickTips.getQuickTip()得到的是它的单态实例
它的单态配置选项，都是可选的
- maxWidth 最大宽度
- minWidth 最小宽度
- showDelay 延时显示（毫秒）
- trackMouse 随着鼠标移动
- hideDelay 延时自动隐藏 （缺省为true）
- dismissDelay 缺省情况下这个浮动提示是经过一段时间以后就自动隐藏，如果这个值设置为0则关闭自动隐藏浮动提示
除非特别指定，其余均为可选项
- autoHide
- cls
- dismissDelay (如果在此定义，将覆盖单例的值)
- target (必须的)
- text (必须的)
- title
- width
官方例子
1 // 初始化单例。任何基于标签的快速提示开始工作。
2 Ext.QuickTips.init();
3
4 // 将一些配置属性应用到此单态
5 Ext.apply(Ext.QuickTips.getQuickTip(), {
6 maxWidth: 200,
7 minWidth: 100,
8 showDelay: 50,
9 trackMouse: true
10 });
11
12 // 为指定的元素手工配置一个快速提示
13 Ext.QuickTips.register({
14 target: 'my-div',//在哪个html元素上显示
15 title: 'My Tooltip',
16 text: 'This tooltip was added in code',//具体要提示的东西
17 width: 100,
18 dismissDelay: 20
19 });
（二）使用html标签属性
需要在标签中注册一个快速提示，你只要简单地添加一个或多个合法的QuickTip属性，以ext:命名空间前缀开头。 HTML元素自己将被自动地设置成快速提示的目标。以下是所有支持属性的列表(除非特别指定，其它均为可选项):
- qclass: 应用到此快速提示的CSS样式(等同于目标元素的'cls'配置项的target元素)。
- qtip (required): 快速提示的文本(等同于目标元素的'text'配置项)。
- qtitle: 快速提示的标题(等同于目标元素的'title'配置项)。
- qwidth: 快速提示的宽度(等同于目标元素的'width'配置项)。
官方实例
1 // 向一个HTML按钮中添加一个快速提示
2 <input type="button" value="OK" ext:qtitle"OK Button" ext:qwidth="100" ext:qtip="This is a quick tip from markup!"></input>
标题党一下，ToolTip就不细说了，扩展的说下怎么在gridpanel的cell上实现悬浮提示功能
（一）对需要提示的单元格,重写renderer函数,添加ext:qtitle , ext:qtip这2个属性即可。
View Code
1 var grid = new Ext.grid.GridPanel({
2 store: store,
3 columns: [
4 {header: "Author", width: 120, dataIndex: 'Author', renderer:renderFun},
5 {header: "Title", width: 180, dataIndex: 'Title', sortable: true}
6 ],
7 height:210
8 });
9 var renderFun=function (data, metadata, record, rowIndex, columnIndex, store) {
10 var tip= record.get('Title')+ '-' + record.get('Author') ;
11 metadata.attr = 'ext:qtitle="' + data+ '"' + ' ext:qtip="' + tip+ '"'; //关键
12 return title ;
13 };
（二）使用extjs3.0新增的方法,设置tooltip的delegate
View Code
1 var grid= new Ext.grid.gridPanel(gridConfig);
2 grid.on('render', function(grid) {
3 var store = grid.getStore();
4 var view = grid.getView();
5 grid.tip = new Ext.ToolTip({
6 target: view.mainBody,
7 delegate: '.x-grid3-row',
8 trackMouse: true,
9 renderTo: document.body,
10 listeners: {
11 beforeshow: function updateTipBody(tip) {
12 var rowIndex = view.findRowIndex(tip.triggerElement);
13 tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;
14 }
15 }
16
17 });
18 });
