详解extjs的Tooltips与QuickTips

详解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

// 初始化单例。任何基于标签的快速提示开始工作。

Ext.QuickTips.init();



// 将一些配置属性应用到此单态

Ext.apply(Ext.QuickTips.getQuickTip(), {

    maxWidth: 200,

    minWidth: 100,

    showDelay: 50,

    trackMouse: true

});



// 为指定的元素手工配置一个快速提示

Ext.QuickTips.register({

    target: 'my-div',//在哪个html元素上显示

    title: 'My Tooltip',

    text: 'This tooltip was added in code',//具体要提示的东西

    width: 100,

    dismissDelay: 20

});

（二）使用html标签属性

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

• qclass: 应用到此快速提示的CSS样式(等同于目标元素的'cls'配置项的target元素)。
  
• qtip (required): 快速提示的文本(等同于目标元素的'text'配置项)。
  
• qtitle: 快速提示的标题(等同于目标元素的'title'配置项)。
  
• qwidth: 快速提示的宽度(等同于目标元素的'width'配置项)。

// 向一个HTML按钮中添加一个快速提示

<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个属性即可。

 

 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 
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

var grid= new Ext.grid.gridPanel(gridConfig);    

 grid.on('render', function(grid) {       

 var store = grid.getStore();            

 var view = grid.getView();               

   grid.tip = new Ext.ToolTip({            

          target: view.mainBody,            

          delegate: '.x-grid3-row',  

          trackMouse: true,                    

          renderTo: document.body,       

          listeners: {                               

                    beforeshow: function updateTipBody(tip) {

                             var rowIndex = view.findRowIndex(tip.triggerElement);                           

                            tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;                

                                   }            

                     }        



    });    

});