extjs gridPanel表格鼠标移动到单元格mouseover显示tooltip提示信息

extjs | 2019-09-13 10:02:39

最佳方法 没有之一
我的需求是表格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事件上 我想怎么弄就怎么弄了,没有我之前存的数据的我就不显示,那肯定是其他的单元格。

登录后即可回复 登录 | 注册
    
关注编程学问公众号