Extjs6的grid中实现鼠标悬停提示效果

最新推荐文章于 2022-05-20 10:35:35 发布

wangqiu198957

最新推荐文章于 2022-05-20 10:35:35 发布

阅读量922

点赞数 1

文章标签：前端 extjs

本文链接：https://blog.csdn.net/wangqiu198957/article/details/116273454

版权

本文介绍了在ExtJS6的Grid组件中如何实现鼠标悬停时显示提示信息，包括两种方法：一是为所有单元格添加提示，二是针对特定单元格设置提示。文中提供了详细的代码示例。

摘要由CSDN通过智能技术生成

效果图：

方式一，所有单元格都有提示：

代码：

//鼠标悬停提示
Ext.override(Ext.grid.GridPanel, {
    afterRender : Ext.Function.createSequence(Ext.grid.GridPanel.prototype.afterRender,function() {                 
        var view = this.getView();     
        this.tip = new Ext.ToolTip({
            target: view.el,
            delegate : '.x-grid-cell-inner',
            trackMouse: true, 
            renderTo: Ext.getBody(), 
            style:{
                backgroundColor:'#FFB800',//自定义背景色
            },
            listeners: {  
                beforeshow: function updateTipBody(tip) {
                    //取cell的值
                    //fireFox  tip.triggerElement.textContent
                    //IE  tip.triggerElement.innerText 
                    var tipText = (tip.triggerElement.i