extjs 表格grid 单元格鼠标移上去悬停mouseover显示tooltip提示框案例:
效果展示:
案例代码:
Ext.define('app.layoutPlan.sampleGrid', { extend: 'Ext.grid.Panel', alias: 'widget.sampleGrid', autoLoad:true, selModel: {selType:'checkboxmodel',mode :'SINGLE'}, bind:{store:'{basedataTreeGridStore}'}, columnLines:true, columns: [{ text:'要显示提示框的字段', dataIndex: 'completeNum', width:150, //1.第1步 renderer,存要显示提示的值 renderer:function (value,metaData,record,rowIndex,colIndex,store,view) { value = Ext.isNumeric(value)?value:0; var planNum=Ext.isNumeric(record.data.notSubmitNum)?record.data.notSubmitNum+value:value; //把要显示的东西存在这个元素里面,存变量了去后台取,或者直接存要显示的值 return "<span tipMsg='' layoutPlanIdToShowTypeNumTip='"+record.data.id+"' style='color:blue;text-decoration: underline;width:100%;display:block;cursor: pointer '>"+value+"/"+planNum+"<span>"; } },{ text: '备注', dataIndex: 'description', width:250 }], bbar: { xtype: 'pagingtoolbar', displayInfo: true }, listeners:{ //2.第2步 renderer 创建提示框,并在显示前更新内容 afterrender:function (cmp, eOpts) { //渲染的时候创建提示框 Ext.create("Ext.tip.ToolTip",{ target:cmp.getView(),//显示在表格上 delegate : '.x-grid-cell-inner',//只显示在 dismissDelay:10000, listeners: { beforeshow: function updateTipBody(tip) { var el=tip.triggerElement.firstChild; if (el&&el.getAttribute&&el.getAttribute("layoutPlanIdToShowTypeNumTip")){ var layoutPlanId=el.getAttribute("layoutPlanIdToShowTypeNumTip"); var tipMsg=el.getAttribute("tipMsg"); if (tipMsg){ tip.update(tipMsg); }else{ //去后台取值或者直接更新提示内容 tip.update(""); Ext.Ajax.request({ url: 'layoutplan/getDetailNumBySecondType', params:{layoutplanId:layoutPlanId}, success: function(response, opts) { var obj = Ext.decode(response.responseText); if(obj.success){ tip.update(obj.message); }else{ Ext.Msg.alert('操作失败',obj.message); } }, failure: function(response, opts) { Ext.Msg.alert('操作失败',response.status+response.responseText); } }); } }else{ return false; } } } }); } } });