EXTJS 4.2 实现 gridpanel 鼠标悬停单元格以提示信息的方式显示单元格内容。
由于gridpanel的单元格里的文字太多时候,都由省略号代替,就想实现如题的功能,经过反复实验,终于搞定了!直接上代码:
me.on('itemmouseenter', function (view, record, item, index, e, eOpts) {
if (view.tip == null) { //这块判断很重要,不能每次都创建个tooltip,要不显示会有问题。
view.tip = Ext.create('Ext.tip.ToolTip', {
// The overall target element.
target: view.el,
// Each grid row causes its own separate show and hide.
delegate: view.itemSelector,
// Moving within the row should not hide the tip.
// trackMouse: false,
// Render immediately so that tip.body can be referenced prior to the first show.
renderTo: Ext.getBody() });
};
var gridColums = view.getGridColumns();
var column = gridColums[e.getTarget(view.cellSelector).cellIndex];
view.el.clean();
view.tip.update(record.data[column.dataIndex]); });
解释下:这里截取主要的代码,实际中,就是监听你的表格itemmouseenter这个事件就行了! 效果如图!
EXTJS 4.2 实现 gridpanel 鼠标悬停单元格以提示信息的方式显示单元格内容。的更多相关文章
- 如何使用phantomJS来模拟一个HTML元素的鼠标悬停
如何使用phantomJS来模拟一个HTML元素的鼠标悬停 (How to use phantomJS to simulate mouse hover on a HTML element) 转 htt ...
- 实习小白笔记一(鼠标悬停、获取多选、提交修改、layer页面、单元格文字长度、json、分页、左连接)
①easyui 当鼠标悬停显示单元格信息: $(this).datagrid('doCellTip',{'max-width':'600px','delay':300}); ②jquery 获取che ...
- EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码
EasyUI Datagrid 鼠标悬停显示单元格内容 ,halign:, align: 0 « 上一篇:LINQ to Entities 中的查询» 下一篇:去掉字符串中的非数字字符 posted ...
- EasyUI的Datagrid鼠标悬停显示单元格内容
功能描述:table鼠标悬停显示单元格内容 1.js函数 function hoveringShow(value) { return "<span title='" + va ...
- Selenium处理页面---弹窗、表格、鼠标悬停、frame、下拉框、上传文件
一.Selenium测试-常用页面处理 1.概述 UI自动化测试(GUI界面层):UI层是用户使用产品的入口,所有功能通过这一层提供给用户,测试工作大多集中在这一层,常见的测试工具有UFT.Robot ...
- CSS3鼠标悬停图片上浮显示描述代码
效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...
- js设置鼠标悬停改变背景色
看了网上那么多的js鼠标悬停时事件,大多数的,说了那么多话,也没解决什么问题,现在直接贴上代码,以供参考 html: <div id="sign">this is te ...
- wpf ListView DataTemplate方式的鼠标悬停和选中更改背景色
今天使用wpf技术弄一个ListView的时候,由于需求需要,需要ListView显示不同的数据模板,很自然的使用了DataTemplate方式来定义多个数据模板,并在ListView中使用ItemT ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
随机推荐
- linux 下的对拍
搞了一上午终于弄好了一个对拍,估计以后调试会方便很多. #!/bin/bash while true; do ./makedate>tmp.in ./XXXXX<tmp.in>tmp ...
- javascript 典型闭包的用法
<body><input type="radio" id="radio1" name="readionGroup" /&g ...
- poj 2441 Arrange the Bulls(状态压缩dp)
Description Farmer Johnson's Bulls love playing basketball very much. But none of them would like to ...
- Adroid APPIUM实例步骤
1.下载eclipse 2.安装java 配置环境变量 3.eclipse 安装adt android development tools 4.android sdk manager 安装tool ...
- swift 自定义导航栏颜色
func setNavigationApperance(){ //自定义导航栏颜色 [self.navigationController?.navigationBar.barTintColor = U ...
- 正则表达式获取URL参数
使用到的正则表达式: [^\?&]?参数名=[^&]+ document.location.getURLPara = function (name) { var reg = new R ...
- 初学者学Java设计模式(一)------单例设计模式
单例设计模式 单例设计模式是指一个类只会生成一个对象,优点是他可以确保所有对象都访问唯一实例. 具体实现代码如下: public class A { public static void main(S ...
- with admin option 与with grant option
在赋予user 权限或者role 时,常常会用到with admin option 和with grant option,而在使用中,可能会很容易出现混淆的情况,现把他们的相同点和不同点总结如下:相同 ...
- AngularJs练习Demo9 Http
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...
- 初识数据字典【weber出品必属精品】
数据字典结构 有两部分组成: 1. 基表:以$结尾的系统表,在创建数据库的时候,oracle自动创建的表 2. 用户可以访问的视图 数据字典的种类 DICTIONARY:简称DICT,所有的数据字典, ...