Extjs Grid中鼠标位置tip提示

grid.on('mouseover',function(e){
var index = grid.getView().findRowIndex(e.getTarget());
//alert("index ======" + index);
if(index >= 0){
var record = store.getAt(index);
var sr = Ext.encode(record.data.description);//grid每行需要展示的数据
var st = sr.substring(1,sr.length-1);
var str;
if(st.length == 0){
str = "";
}else{
str = st;
}
var rowEl = Ext.get(e.getTarget());
rowEl.set({
'ext:qtip': '<div style="font-size: 12;">'+ str +'</div>',
'ext:qwidth':200,
'ext:qtitle':'<b>说明:<b></br>',
'ext:qclass': ''
},false);
}
});

或者 如下:Extjs4.X

	resultGrid.getView().on("render",function(view){
		view.tip=Ext.create('Ext.tip.ToolTip',{
			target:view.el,
			delegate:view.itemSelector,
			trackMouse:true,
			renderTo:Ext.getBody(),
			listeners:{
			   beforeshow:function(tip){
			       var record=view.getRecord(tip.triggerElement);
			       var html=createTip(record.get("name"),record.get("email"),record.get("phone"),record.get("address"),record.get("insitution"));
			       tip.update(html);
		       }
		    }
		
		});
	});
	
	function createTip(name,email,phone,address,insitution,photo){
		var html='<div>'+
				  '<img src="'+photo+'" style="width:100px;height:100px;"/>'+
				  '<div style="float:right">'+
				     '<table> '+
				       ' <tr>'+
				          ' <td>姓名:</td><td>'+name+'</td>'+
				       ' </tr>'+
				       ' <tr>'+
				          ' <td>邮箱:</td><td>'+email+'</td>'+
				       ' </tr>'+
				       ' <tr>'+
				         ' <td>电话:</td><td>'+photo+'</td>'+
				       ' </tr>'+
				       ' <tr>'+
				         ' <td>地址:</td><td>'+address+'</td>'+
				       ' </tr>'+
				       ' <tr>'+
				         ' <td>机构:</td><td>'+insitution+'</td>'+
				       ' </tr>'+
				    ' </table>'+
				  '</div>'+
				'</div>';
		return html;
	}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值