ExtJS Grid 每个Cell都显示tooltip

 在Ext JS 3.x 中，如果为GridPanel中的每个Cell都显示tooltip时，而内容是就Cell内容时，有一种比较好的方法就是官网推荐的【Ext JS 3.x\src\widgets\tips\ToopTip.js】中的第90行到108行的例子,如下所示

 

Js代码  

1. var myGrid = new Ext.grid.GridPanel(gridConfig);  
2. myGrid.on('render', function(grid) {  
3.     var store = grid.getStore();  // Capture the Store.  
4.     var view = grid.getView();    // Capture the GridView.  
5.     myGrid.tip = new Ext.ToolTip({  
6.         target: view.mainBody,    // The overall target element.  
7.         delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.  
8.         trackMouse: true,         // Moving within the row should not hide the tip.  
9.         renderTo: document.body,  // Render immediately so that tip.body can be  
10.                                   //  referenced prior to the first show.  
11.         listeners: {              // Change content dynamically depending on which element  
12.                                   //  triggered the show.  
13.             beforeshow: function updateTipBody(tip) {  
14.                 var rowIndex = view.findRowIndex(tip.triggerElement);  
15.                 tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id;  
16.             }  
17.         }  
18.     });  
19. });  

 

然而这个例子，只限于显示row，而不适合cell，当我们仿照取列数时

 

Js代码  

1. var cellIndex = view.findCellIndex(tip.triggerElement);   

 

这时总会返回一个false，于是就到不得Cell对象或内容。经过一段时间的摸索，终于找到的原因，原来上面指定delegate属性为row, 我们只需要改成

 

Js代码  

1. delegate: '.x-grid3-cell',  

 

 这样我就到得Cell对象，显示tooltip就小事一桩，给个例子供大家参考

 

Js代码  

1. listeners : {  
2.     scope : this,  
3.     render: function (grid){  
4.             //var store = grid.getStore();  // Capture the Store.  
5.             var view = grid.getView();    // Capture the GridView.  
6.             grid.tip = new Ext.ToolTip({  
7.                 target: view.mainBody,    // The overall target element.  
8.                 delegate: '.x-grid3-cell', // Each grid row causes its own seperate show and hide.  
9.                 trackMouse: true,         // Moving within the row should not hide the tip.  
10.                 renderTo: document.body,  // Render immediately so that tip.body can be  
11.                 anchor: 'top',  
12.                 listeners: {              // Change content dynamically depending on which element  
13.                                           //  triggered the show.  
14.                     beforeshow: function updateTipBody(tip) {  
15.                         var rowIndex = view.findRowIndex(tip.triggerElement);  
16.                         var cellIndex = view.findCellIndex(tip.triggerElement);  
17.                         //前三列或大于第八列内容不提示  
18.                         if(cellIndex < 3 || cellIndex >8)return false;  
19.                         var cell = view.getCell(rowIndex, cellIndex);  
20.                         tip.body.dom.innerHTML = cell.innerHTML;  
21.                     }  
22.                 }  
23.             });  
24.     }  
25. }  

 这时监听只要放在grid中就可以达到效果。

 

如果你的Cell中不是原始的数据，包括编辑框、颜色、图片等，显示时就不是理想的效果，自己可根据实际情况自行过滤。