[Ext JS 4] Grid 中的单元格添加Tooltip 的效果| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

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

## [Ext JS 4] Grid 中的单元格添加Tooltip 的效果
### 问题描述
使用Grid 显示数据时， 如果某个单元格的的字符串比较多时，Grid 默认会显示截断的字串， 后面加上 ... 。效果类似
![](/upload/picture/2022-09-28/upload_03ab2a62ed075b2284c017e346d0af51.png)

要看到后面的内容， 除非把这一栏的长度拉长。
看起来着实不方便。

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

### 解决思路
解决这个问题， 结合Extjs 的两个只是
1. Ext.QuickTips
2. grid Columns 中某个Column 的  renderer

要使用QuickTip , 使用
Ext.QuickTips.init(); 就可以了。

在Grid 的每行数据render 的时候， 添加上tooltip 的显示配置

metaData.tdAttr = 'data-qtip="' + Ext.String.htmlEncode(value) + '"';

完整代码
```html
htmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=ISO-8859-1">
<title>test Pie Charttitle>
<scripttype="text/javascript"src="../ext-all-debug.js">script>
<linkrel="stylesheet"type="text/css"href="../resources/ext-theme-neptune/ext-theme-neptune-all.css" />
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
	        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224Testdsafdsafdddddddddddddafdsafdsafdsafdsafdsafdsafdsadfsafdsafdsafd"  },
	        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234555-111-1224Testdsafdsafdddddddddddddafdsafdsafdsafdsafdsafdsafdsadfsafdsafdsafd" },
	        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244555-111-1224Testdsafdsafdddddddddddddafdsafdsafdsafdsafdsafdsafdsadfsafdsafdsafd"  },
	        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254555-111-1224Testdsafdsafdddddddddddddafdsafdsafdsafdsafdsafdsafdsadfsafdsafdsafd"  }
	    ]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
	        }
	    }
	});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
	        { text: 'Name',  dataIndex: 'name' },
	        { text: 'Email', dataIndex: 'email', flex: 1 },
	        { text: 'Phone', dataIndex: 'phone',renderer:function (value, metaData, record, rowIdx, colIdx, store){
	        	metaData.tdAttr = 'data-qtip="' + Ext.String.htmlEncode(value) + '"';
return value;
	        }}
	    ],
height: 200,
width: 400,
renderTo: 'test-div'
	});
});
script>
head>
<body>
<inputtype="button"value="Focus2"onclick = "focus2()">
<divid="test-div"style="width: 1024px; height: 600px">div>
body>
html>
```

Extjs 的js 和 CSS 请自行配置。

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

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

网站导航