ExtJS Grid 每个Cell都展示tooltip

ExtJS Grid 每个Cell都显示tooltip

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

?

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中不是原始的数据，包括编辑框、颜色、图片等，显示时就不是理想的效果，自己可根据实际情况自行过滤。