ExtJS Grid Tooltip提示 鼠标悬停 项目案例

虽然封装比较厉害只看关键代码段就可以

///封装GridPanel和EditorGridpanel, 实现列设置功能
Ext.ux.GridPanel = Ext.extend(Ext.grid.GridPanel,{
    loadMask:true,
    stripeRows:true,
    initComponent:function(){
        CreateTitleButtons(this);
        this.createHeadMenu();
        Ext.ux.GridPanel.superclass.initComponent.call(this);
    },
    listeners:{
        headercontextmenu : function(grid,columnIndex,e){
            e.preventDefault();
            this.HeadRightClickMenu.showAt(e.getXY());
        },
        beforerender : function(grid){
            if(typeof(gAppName)=='undefined'){
                var gAppName="DHCSTCOMMONM";
            }
            RefreshGridColSet(grid,gAppName);
        },
        afterrender : function(grid){
        this.map=new Ext.KeyMap(this.body,{
            key:'C',
            ctrl:true,
            alt:false,
            stopEvent:true, 
            fn:this.copyRowInfo2,
            scope: this    
        });},
        **render:function(grid){
            gridTip(grid)}
    },**
    createHeadMenu : function(){
        function CommonColGridSet(){
            if(this.getId().indexOf('ext-comp')>=0){
                Msg.info("warning","请联系开发人员维护ID后再试!");
                return;
            }
            if(typeof(gAppName)=='undefined'){
                var gAppName="DHCSTCOMMONM";
            }
            GridColSet(this,gAppName);
        }
        var HeadRightClickMenu = new Ext.menu.Menu({
            id : 'HeadRightClickMenu',
            items : [
                {text:'导出当前页',scope:this,handler:function(b,e){gridSaveAsExcel(this);}},
                {text:'导出所有',scope:this,handler:function(b,e){ExportAllToExcel(this);}},
                {text:'列设置',scope:this,handler:CommonColGridSet}
            ]
        });
        this.HeadRightClickMenu = HeadRightClickMenu;
    },
    copyRowInfo2: function(){
         var infostr="";
         var info="";
         var record=null;
         try{
             record = this.getSelectionModel().getSelected();
             }catch(e){}
         try{
         if(!record){
         var cell = this.getSelectionModel().getSelectedCell();
         record=this.getStore().getAt(cell[0]);
         }
         }catch(e){}
         if (record==null){
           Msg.info("warning","没有选中行!");
           return;    
         }else{
            var cm =this.getColumnModel();
            for(var i=0; i<cm.getColumnCount();i++){
               var col = cm.config[i];
               if (col.IFCopy){
               var info=record.get(col.dataIndex);
               infostr=infostr+"||"+info;
            }}
            copyToClipboard(infostr);
        }
    }
});

这个是关键代码注意

function gridTip(grid){
    var view = grid.getView();
    var store = grid.getStore();
    var cm=grid.getColumnModel();
    grid.tip = new Ext.ToolTip({
        target: view.mainBody,
        delegate: '.x-grid3-cell',
        trackMouse: true,
        renderTo: document.body,
        anchor: 'top',
        listeners: {
            beforeshow: function(tip) {
                var rowIndex = view.findRowIndex(tip.triggerElement);
                var cellIndex = view.findCellIndex(tip.triggerElement);
                var Index=cm.getDataIndex(cellIndex);
                var column = cm.getColumnAt(cellIndex);
                var colRenderer = column.renderer;
                var innerHTML = store.getAt(rowIndex).get(Index);
                 //alert(rowIndex+";"+cellIndex+";"+Index+";"+innerHTML)
                if(colRenderer.toString().replace(/\s/g,'') != "function(value){returnvalue;}"
                && column.xtype!='checkcolumn' && column.id != 'checker'){
                    innerHTML = column.renderer(innerHTML,{},store.getAt(rowIndex),rowIndex,cellIndex,store);
                }
                if(Ext.isEmpty(innerHTML)){
                    return false;
                }else{
                    tip.body.dom.innerHTML = innerHTML;
                }
            }
        }
    });
}