ExtJS Grid 每个Cell都展示tooltipExtJS 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);
myGr...
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中不是原始的数据，包括编辑框、颜色、图片等，显示时就不是理想的效果，自己可根据实际情况自行过滤。
本文档为【ExtJS Grid 每个Cell都展示tooltip】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。
该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。
[版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
浙公网安备 33021202002483