ExtJS Grid 每个Cell都展示tooltip

ExtJS Grid 每个Cell都展示tooltip c_a_3(); ExtJS Grid 每个Cell都显示tooltip 在Ext JS 3.x 中，如果为GridPanel中的每个Cell都显示tooltip时，而内容是就 Cell内容时，有一种比较好的方法就是官网推荐的【Ext JS 3.x\src\widgets\tips\ToopTip.js】中的第90行到108行的例子,如下所示 var myGrid = new Ext.grid.GridPanel(gridConfig); myGrid.on('render', function(grid) { var store = grid.getStore(); // Capture the Store. var view = grid.getView(); // Capture the GridView. myGrid.tip = new Ext.ToolTip({ target: view.mainBody, // The overall target element. delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide. trackMouse: true, // Moving within the row should not hide the tip. renderTo: document.body, // Render immediately so that tip.body can be // referenced prior to the first show. listeners: { // Change content dynamically depending on which element // triggered the show. beforeshow: function updateTipBody(tip) { var rowIndex = view.findRowIndex(tip.triggerElement); tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id; } } }); }); 然而这个例子，只限于显示row，而不适合cell，当我们仿照取列数时 var cellIndex = view.findCellIndex(tip.triggerElement); 这时总会返回一个false，于是就到不得Cell对象或内容。经过一段时间的摸索，终于找 到的原因，原来上面指定delegate属性为row, 我们只需要改成 delegate: '.x-grid3-cell', 这样我就到得Cell对象，显示tooltip就小事一桩，给个例子供大家参考 listeners : { scope : this, render: function (grid){ //var store = grid.getStore(); // Capture the Store. var view = grid.getView(); // Capture the GridView. grid.tip = new Ext.ToolTip({ target: view.mainBody, // The overall target element. delegate: '.x-grid3-cell', // Each grid row causes its own seperate show and hide. trackMouse: true, // Moving within the row should not hide the tip. renderTo: document.body, // Render immediately so that tip.body can be anchor: 'top', listeners: { // Change content dynamically depending on which element // triggered the show. beforeshow: function updateTipBody(tip) { var rowIndex = view.findRowIndex(tip.triggerElement); var cellIndex = view.findCellIndex(tip.triggerElement); //前三列或大于第八列内容不提示 if(cellIndex 3 || cellIndex 8)return false; var cell = view.getCell(rowIndex, cellIndex); tip.body.dom.innerHTML = cell.innerHTML; } } }); } } 这时监听只要放在grid中就可以达到效果。 如果你的Cell中不是原始的数据，包括编辑框、颜色、图片等，显示时就不是理想的效果，自己可根据实际情况自行过滤。