在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中不是原始的数据,包括编辑框、颜色、图片等,显示时就不是理想的效果,自己可根据实际情况自行过滤。
分享到:
相关推荐
Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
NULL 博文链接:https://mzl-2011.iteye.com/blog/1151199
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
ExtJs Grid是否选择行,是:返回选择行record;否:返回false
ExtJS tooltip功能组件实例
Extjs4下拉菜单中用Grid显示,有单选,和多选两个控件,完美通用代码控件,绝对让你好用,值得收藏^-^
EXTJS grid导出EXCEL文件,源码可以直接导入MYECLIPSE使用,EXTJS版本3.2.0
extjs grid 多表头 插件 extjs grid 多表头 插件
Extjs动态Grid的生成 htm
extjs grid ide:myeclipse5.5 jboss4.2.1 extjs4.2.1
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
ExtJs 4.0 Grid 单元格合并控件封装
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
这是一个简单的在extjs下的grid转化到Excel,里面代码简单易懂,在包里面还集成了复杂的js转化函数,不过本人没有用它来进行转化! 注:在用EXTJS的导出Excel技术中,一定要注意分页的问题
自己写的一个Extjs Grid2Grid拖拽
ExtJs grid多选时获取选中的所有值,以及其他相关的操作
EXTJS Grid布局总结例子,含源代码。