最佳方法 没有之一
我的需求是表格grid有一列,是显示总数,鼠标移动到某个单元格就显示详情,我也知道extjs 有tooltip,这东东。
但是gridpanel 并没有针对单元格的 mouseover事件,经过很久很久的搜索和尝试,终于找到最佳方法了。
1.首先表格的column要用renderer,这个大家都是知道的
columns: [{ text:'总计)', dataIndex: 'num', renderer:function (value,metaData,record,rowIndex,colIndex,store,view) { return "<span tipDataId='"+record.data.text+"' tipDataId='"+record.data.id+"'<span>"; } }]
很明显 我把重要信息存放在了 每个单元格显示的元素span上
2.然后给表格gridpanel一个事件
listeners:{ afterrender:function( cmp, eOpts ){ Ext.create("Ext.tip.ToolTip",{ target:cmp.getView(), delegate : '.x-grid-cell-inner', listeners: { beforeshow: function updateTipBody(tip) { var el=tip.triggerElement.firstChild; if (el&&el.getAttribute&&el.getAttribute("layoutPlanIdToShowTypeNumTip")){ var layoutPlanId=el.getAttribute("layoutPlanIdToShowTypeNumTip"); tip.update("houyong"); }else{ return false; } } } }); } }
也就是渲染后鼠标只要移到这个target上就显示提示框,而且delegate 控制了只在这个样式上有作用,最后,这个tooltip的beforeshow事件上 我想怎么弄就怎么弄了,没有我之前存的数据的我就不显示,那肯定是其他的单元格。