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这个事件就行了!

效果如图!

时间: 2024-10-07 10:07:11

EXTJS 4.2 实现 gridpanel 鼠标悬停单元格以提示信息的方式显示单元格内容。的相关文章

鼠标悬停出现提示信息怎么做

概述– 提示:指启示,提起注意或给予提醒和解释. 在 excel 中会经常用到给某个格子增加提醒信息,比如金额提示输入数值或最大长度值等等.设置方式也有多种,简单的,仅为单元格插入批注就可以了,也有复杂的有效性验证方式.下图为批注方式: 另外,在网页设计中也常常看到同样功能,常见的帮助提示框(tips),鼠标悬停在帮助图标上时,显示所有的帮助信息.也不难,几行 JS 脚本的事儿. 润乾报表支持在 Web 发布,衣食父母们同样希望产品具备鼠标移动到某个位置时显示一些提示信息的功能. 润乾想客户之所

ExtJS4.x Grid 单元格鼠标悬停提示

1 //每一个列都会出现鼠标悬浮上去显示内容 2 /** 3 * //适用于Extjs4.x 4 * @class Ext.grid.GridView 5 * @override Ext.grid.GridView 6 * GridPanel单元格不能选中复制问题 7 * 单元格数据显示不完整 ,增加title 浮动提示信息 8 */ 9 Ext.override(Ext.grid.GridPanel, { 10 afterRender : Ext.Function.createSequence

实习小白笔记一(鼠标悬停、获取多选、提交修改、layer页面、单元格文字长度、json、分页、左连接)

①easyui 当鼠标悬停显示单元格信息: $(this).datagrid('doCellTip',{'max-width':'600px','delay':300}); ②jquery 获取checkbox多个被选元素 1 var swa = new Array(); 2 $("input[name='mainten.softwareReason']:checked").each(function(){ 3 swa.push($(this).val()); 4 }); 5 var

CSS+JS鼠标悬停单元格变色

又一款鼠标悬停表格单元格,表格变色的实例效果,运用了CSS和JS两者技术的结合,因些兼容性非常好,而且易于控制,代码修改方便,跟表格读取动态数据没有任何关系,比较方便. <html><head><title>鼠标悬停单元格变色</title><meta http-equiv="content-Type" content="text/html;charset=gb2312"><style type=&q

EasyUI的Datagrid鼠标悬停显示单元格内容

功能描述:table鼠标悬停显示单元格内容 1.js函数 1 function hoveringShow(value) { 2 return "<span title='" + value + "'>" + value + "</span>"; 3 } 2.调用函数 1 <table id="mydatagrid" style="width:100%;height:96%"&g

鼠标悬停图片移动的效果

当前很多购物网站,像京东,蘑菇街这些都有对展示的图片做这种鼠标悬停图片上移,下移,左移或者右移效果, 实现代码很简单,就用css3的transform便可实现. 下列代码实现的是鼠标悬停,div向上移动30px,鼠标拿开div恢复原始位置. css: <style> div{ margin-top: 100px; width: 100px; height: 100px; background: pink; transition:All 0.4s ease-in-out;//让移动效果变得平滑自

HTML+CSS鼠标悬停效果

HTML+CSS实现鼠标悬停效果 HTML: <link href="style.css" rel="stylesheet"> <a class="social" href="https://webbb.be" target="_blank"> <div class="front"> <i class="fa fa-facebook&q

兄弟连教育分享:用CSS实现鼠标悬停提示的方法

本文,兄弟连HTML5培训 ,分享了纯CSS实现鼠标悬停提示的方法.给大家供大家参考.具体分析如下: 这是一款比较漂亮的鼠标悬停提示效果,用纯CSS代码实现,鼠标放到图片上会显示一个层,也就是悬停时的提示,在这个提示框内你还可以加入图片或是一个列表,这就靠你的发挥了,提示框的背景颜色和文字颜色你都可以自己调. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3

j-query应用---鼠标悬停不同文字显示不同背景图片banner动画

源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt