Extjs4:给Grid的Column加上提示

最新推荐文章于 2019-02-28 11:04:13 发布

yejian235

最新推荐文章于 2019-02-28 11:04:13 发布

阅读量483

点赞数

CC 4.0 BY-SA版权

分类专栏： Extjs

本文链接：https://blog.youkuaiyun.com/yejian235/article/details/84416907

Extjs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在ExtJS Grid中实现当单元格内容超出显示宽度时使用鼠标悬停提示完整内容的方法。通过修改单元格的metaData属性，可以实现在内容过长时自动截断并显示省略号，同时提供鼠标悬停提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Grid中展示的内容超出column设定的宽度，如果鼠标移到单元格上能提示完整的内容，给人的感觉会相对友好些。
还是引用之前的例子《Extjs4：给Grid的Header加上提示》,在公司名称列，如果长度超过10，截取10个字符，加省略号显示，其实是引用上一次做例子《Extjs4:改变Grid单元格背景色》中最后提到的metaData中tdAttr，先看效果：

代码：

{
                    xtype: 'gridcolumn',
                    sortable: false,
                    dataIndex: 'company',
                    flex: 1,
                    text: '公司',
                    tooltip: '公司名称',
                    renderer: function(value, metaData, data) {
                    	var cname = value;
                    	if(value.length>10){
                    		 metaData.tdAttr = 'data-qtip="'+value+'"';
                    		cname = value.substring(0,10)+"...";
                    	}
                        return cname;
                    }
                }