给grid添加tip，只需要改几个字就可以在很多地方使用

最新推荐文章于 2022-07-21 12:39:12 发布

原创最新推荐文章于 2022-07-21 12:39:12 发布 · 785 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function

本文介绍了一种在 ExtJS 的 Grid 控件中为特定列添加 Tooltip 的方法。通过监听 Grid 的 'render' 事件，可以实现当鼠标悬停在表格行上时显示指定列的数据作为提示信息的功能。

/**
       * 添加grid的某一列的tip
         * 就将tip绑定到每一列上
     * 此方法可以黏贴到任何使用gird的页面中可直接实现tip效果
     */
   grid.on('render',function(grid){
    var storeTip = grid.getStore();
    var view = grid.getView();
    grid.tip = new Ext.ToolTip({
     target : view.mainBody,
     delegate : '.x-grid3-row',
     trackMouse : true,
     renderTo : document.body,
     listeners : {
      beforeshow: function updateTipBody(tip){
       var rowIndex = view.findRowIndex(tip.triggerElement);
       tip.body.dom.innerHTML = store.getAt(rowIndex).get("name"); //chenbitao cKF47637 store.getAt(rowIndex)获得的事Record，‘name’是field中的值
      }
     }
    });
   });