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

Posted 2023-01-10

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

///封装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;
                
            
        
    );