在Ext的GridPanel中添加鼠标悬停的效果

我们在进行前段开发时,通常会出现这样的问题:就是Ext的Grid每列可显示的字数不是很多,在为了布局漂亮而不改变每列宽度的前提下,我们可以给需要显示的列添加一个鼠标的悬停事件,添加一个QuickTips来显示详细的内容

renderer: function(value, metadata, record, rowIndex, columnIndex, store) {
                metadata.attr = 'ext:qtip="标签详细信息:<br/>' + value +'"';
                return value;
               }


这就是具体的实现代码,很简单吧 !其实就是给这一列加上renderer。

函数中的value,就是我们获取到的值,所以我们只是添加了qtip,这样一来,grid里面显示的是不完全的结果,把鼠标放在上面之后就显示出了详细的内容!

对了,不要忘了,还需要加上这句话

Ext.QuickTips.init();


来显示qtip

给出ColumnModel中该列的定义

{
		id : 'myTag',
		header : '标签',
		align : 'center',
		dataIndex : 'tag',
		sortable: true,
		renderer: function(value, metadata, record, rowIndex, columnIndex, store) {
                metadata.attr = 'ext:qtip="标签详细信息:<br/>' + value +'"';
                return value;
               }
	}


评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值