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;
	}


你可能感兴趣的:(function,ext,ExtJs,div)