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

来源：互联网发布：优化方案编辑：程序博客网时间：2024/06/04 18:05

问题描述

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

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

看起来着实不方便。

可以考虑一个解决办法，就是给这个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) + '"';

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>test Pie Chart</title><script type="text/javascript" src="../ext-all-debug.js"></script><link rel="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>    <input type="button" value="Focus2" onclick = "focus2()"><div id="test-div" style="width: 1024px; height: 600px"></div></body></html>

Extjs 的js 和 CSS 请自行配置。

3 0