詳解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;                

                                   }            

                     }        



    });    

});