Ext 4.2 鼠标悬停提示

最新推荐文章于 2021-01-15 16:19:58 发布

原创最新推荐文章于 2021-01-15 16:19:58 发布 · 906 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何在ExtJS中监听Grid Panel的render事件来实现鼠标悬停时显示提示信息的功能。具体步骤包括：1) 在Grid Panel配置项中设置listeners；2) 通过'itemmouseenter'事件获取当前单元格的信息；3) 创建ToolTip并绑定到Grid Panel上。

监听grid.Panel的render事件

listeners:{

                       'render': function(g) { //鼠标悬浮提示
                            g.on("itemmouseenter", function(view,record,mode,index,e) {
                               var view = g.getView();
                                grid.tip = Ext.create('Ext.tip.ToolTip', {
                               target: view.el,
                               delegate: view.getCellSelector(),
                               trackMouse: true,
                               renderTo: Ext.getBody(),
                               listeners: {
                                   beforeshow: function updateTipBody(tip) {
                                       tip.update(tip.triggerElement.innerHTML);
                                   }
                               }
                           });

                        });
                    }

}