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;                }            }        }    });}