详解extjs的Tooltips与QuickTips

转自：http://www.cnblogs.com/suanmeitang/archive/2012/03/29/2424286.html

它们都是实现浮动提示功能的，当鼠标移过目标元素时，提供需要显示的附加信息。

首先看一下它们的集成体系: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      100,

18     dismissDelay: 20

19 });

（二）使用html标签属性

需要在标签中注册一个快速提示，你只要简单地添加一个或多个合法的QuickTip属性，以ext:命名空间前缀开头。
HTML元素自己将被自动地设置成快速提示的目标。以下是所有支持属性的列表(除非特别指定，其它均为可选项):

qclass: 应用到此快速提示的CSS样式(等同于目标元素的'cls'配置项的target元素)。
qtip (required): 快速提示的文本(等同于目标元素的'text'配置项)。
qtitle: 快速提示的标题(等同于目标元素的'title'配置项)。
q 快速提示的宽度(等同于目标元素的'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",  120, dataIndex: 'Author', renderer:renderFun},
5 {header: "Title",  180, dataIndex: 'Title', sortable: true}
6 ],
7 height:210
8 });
9
10 //鼠标放在Grid上面显示提示信息的实现方法
11 function renderTip(data, metadata) {
12   var title = "";
13   var tip = data;
14   metadata.attr = 'ext:qtitle="' + title + '"' + ' ext:qtip="' + tip + '"';
15   return data;
16 }
17 //修要配置在 Ext.grid.ColumnModel 创建每行记录的 renderer 属性上面

（二）使用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 });