[Ext JS 4] Grid 中的单元格添加Tooltip 的效果

最新推荐文章于 2016-05-19 10:44:04 发布
最新推荐文章于 2016-05-19 10:44:04 发布
阅读量9.1k 收藏
点赞数 3
分类专栏： 130-Web语言 Ext JS开发大全
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oscar999/article/details/50751650
版权
本文介绍了如何在Ext JS 4的Grid中实现单元格的Tooltip效果，当单元格内容过长被截断时，通过鼠标悬停显示完整信息。通过结合Ext.QuickTips和grid Column的renderer方法，设置metaData.tdAttr为'data-qtip="' + value + '"',在数据渲染时添加Tooltip配置。" 117552347,8606314,微搭低代码平台：解决预览报错与匿名登录配置,"['低代码开发', '云开发', '小程序开发', '权限管理', '技术教程']
摘要由CSDN通过智能技术生成

问题描述

使用Grid 显示数据时， 如果某个单元格的的字符串比较多时，Grid 默认会显示截断的字串， 后面加上 ... 。效果类似


要看到后面的内容， 除非把这一栏的长度拉长。

看起来着实不方便。


可以考虑一个解决办法，就是给这个Cell，添加Tooltip 的效果， 当鼠标移动到这个Cell 上面时， 弹出一个Tooltip 把所有的内容显示出来。


解决思路

解决这个问题， 结合Extjs 的两个只是

了解本专栏 订阅专栏 解锁全文 超级会员免费看
oscar999
关注
专栏目录
订阅专栏
12.2.3 Ext JS 可以上下移动行的Grid
oscar999的专栏
03-23 351
实现Ext JS行上下移动的Grid 1. 每一行数据有一个排序的编号， 这个编号是存储在数据库中 2. 每一行都有向上和向下移动的按钮 3. 点击向上移动， 当前行往前移动一行； 如果移动的行是第一行， 则移动到最后一行 4. 点击向下移动， 当前行往后移动一行； 如果移动的行是最后一行， 则移动到第一行
extjs4.x grid单元格加入tooltip提示
xpxpxpx的专栏
03-27 799
行提示官方例子：http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.tip.ToolTip 以下为单元格提示.....         var store = Ext.create('Ext.data.ArrayStore', {             fields: ['company', 'price', 'change'],
Ext.js 4 实现 Grid cell tooltip ，单元格提示
weixin_33795743的博客
07-31 193
2019独角兽企业重金招聘Python工程师标准>>> ...
Extjs4:给Grid的Column加上提示
yejian235的博客
04-09 386
在Grid中展示的内容超出column设定的宽度，如果鼠标移到单元格上能提示完整的内容，给人的感觉会相对友好些。 还是引用之前的例子《Extjs4：给Grid的Header加上提示》,在公司名称列，如果长度超过10，截取10个字符，加省略号显示，其实是引用上一次做例子《Extjs4:改变Grid单元格背景色》中最后提到的metaData中tdAttr，先看效果： 代码： [cod...
Extjs 给 Grid 加上tooltip的几种实现方式
jazywoo_在路上
07-13 4436
1.表头提示   在2.2里面是设置ColumnModel.tooltip ,3.0则是Column. tooltip 如下: Js代码   var grid = new Ext.grid.GridPanel({     columns:[       {header:'名称',dataIndex:'name',tooltip:'对象名称'},
Ext.grid.GridPanel
不啦草的草原
02-26 641
1、Ext.grid.GridPanel      主要配置项：           store：表格的数据集           columns：表格列模式的配置数组，可自动创建ColumnModel列模式           autoExpandColumn：自动充满表格未用空间的列，参数为列id，该id不能为0           stripeRows：表格是否隔行换色，默认为fa
Extjs Grid 中的 ToolTip效果
爱.NET
11-01 215
效果图如下 js代码: // Create the namespace Ext.ns('Ext.ux.plugins.grid'); /** * Ext.ux.plugins.grid.CellToolTips plugin for Ext.grid.GridPanel * * A GridPanel plugin that enables the creation o...
extjs 04_grid 单击事件新发现
12-09
这段代码中，`grid.getView().findRowIndex(e.getTarget())`用于找到鼠标悬停的行索引，然后获取对应的记录数据并序列化为字符串，最后通过`Ext.Element`对象的`set`方法设置单元格的提示属性。 此外，我们还可以...
EXT中三种方法实现在DataGrid上显示toolTip
11-24
EXT中三种方法实现在DataGrid上显示toolTip
ExtJS Grid 每个Cell都显示tooltip
lxf_999的专栏
07-21 570
在Ext JS 3.x 中，如果为GridPanel中的每个Cell都显示tooltip时，而内容是就Cell内容时，有一种比较好的方法就是官网推荐的【Ext JS 3.x\src\widgets\tips\ToopTip.js】中的第90行到108行的例子,如下所示   Js代码   var myGrid = new Ext.grid.GridPanel(gridC
为Extjs的GridPanel添加单元格的ToolTip功能
weixin_30535565的博客
12-26 211
在Extjs的GridPanel中，要想给单元格拥有ToolTip功能（鼠标移动到单元格上方时，显示一个小提示，这个小功能的好处是当列宽不足时，过长的内容被隐藏了，也可以通过ToolTip看到全部内容），一种常见的方法是，在ColumnModel中配置renderer，然后使用ext:qtip属性来实现(Extjs4以前，Extjs4后使用data-qtip与data-qtitle)，就...
Ext Column 使用Tootip显示内容
大新博客
05-19 2826
使用Ext.grid.Panel时，有时遇到列内容过多，单元格显示不下的情况，我们可以利用Tootip 当鼠标移入时显示全部内容。 如下图: 代码如下: { text: 'Column Header Blah', dataIndex: 'blah', renderer: function(value, metaData, record,
EXT.NET GridPanel 鼠标经过列位置tip提示内容
sharionlee
11-20 1732
鼠标经过列位置tip显示列内容（参考Ext.NET Examples Explorer【GridPanel Row with ToolTip】）： JS: var showTip = function () { var rowIndex = GridPanel1.view.findRowIndex(this.triggerEle
Ext的GridPanel的Tips
ArcherBoy30的专栏
03-06 210
store.load({params: {start: 0, limit: 10},callback:function(a,b,c){showPanelTips(grid)}}); /** * author：liwenjie * 实现GridPanel的每一个单元格tips显示 * To Show the tips of gridPanel's cell * */ function sho...
EXT 鼠标置于GridPanel某一行上显示提示tip消息
静水渊的专栏
02-05 4953
listeners: { 'render': function (grid) { var store = grid.getStore(); var view = grid.getView();
【Ext.Net学习笔记】06：Ext.Net GridPanel的用法（GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel）...
06-03 253
GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能，这个功能个人觉得还说很有用处的，尤其是数据中包含图片等内容的时候。 下面来看看效果： 使用行折叠/展开功能之后，在Ext.Net GridPanel的行头会出现一个展开图标，点击图标以后能够将这一行展开： 使用XTemplate实现行折叠/展开 这是最简单的一种实现，在上一篇文章...
Extjs中Gridpanel中加每行提示
lanseranbing的专栏
10-17 163
在使用GridPanel时，在列数量较多或存在备注型信息时，可以通过tip窗体进行每行详细信息的显示，笔者是通过如下方式进行 图例： ClientProduct_grid.on('render',function (grid) {       var store=grid.getStore();       var view=grid.getView();       v...
winform dataGridView单元格添加ToolTip
最新发布
02-07
可以在DataGridView的CellMouseMove事件中添加代码来显示ToolTip，例如： ``` private void dataGridView1_CellMouseMove(object sender, DataGridViewCellMouseEventArgs e) { if (e.ColumnIndex >= 0 && e.RowIndex >= 0) { string toolTipText = dataGridView1[e.ColumnIndex, e.RowIndex].Value.ToString(); toolTip1.SetToolTip(dataGridView1, toolTipText); } } ``` 在上面的代码中，我们获取当前鼠标指向的单元格的值，并将其设置为ToolTip的文本。 这里假设我们已经在窗体上添加了一个名为toolTip1的ToolTip控件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

oscar999

送以玫瑰，手留余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值