extjs 表格grid 单元格鼠标移上去悬停mouseover显示tooltip提示框

extjs | 2019-09-13 10:02:39

 extjs 表格grid 单元格鼠标移上去悬停mouseover显示tooltip提示框案例:


效果展示:

2.png

案例代码:

Ext.define('app.layoutPlan.sampleGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.sampleGrid',
    autoLoad:true,
    selModel: {selType:'checkboxmodel',mode :'SINGLE'},
    bind:{store:'{basedataTreeGridStore}'},
    columnLines:true,
    
    columns: [{
        text:'要显示提示框的字段',
        dataIndex: 'completeNum',
        width:150,
                //1.第1步 renderer,存要显示提示的值
        renderer:function (value,metaData,record,rowIndex,colIndex,store,view) {
            value = Ext.isNumeric(value)?value:0;
            var planNum=Ext.isNumeric(record.data.notSubmitNum)?record.data.notSubmitNum+value:value;
                        //把要显示的东西存在这个元素里面,存变量了去后台取,或者直接存要显示的值
            return "<span tipMsg='' layoutPlanIdToShowTypeNumTip='"+record.data.id+"' style='color:blue;text-decoration: underline;width:100%;display:block;cursor: pointer '>"+value+"/"+planNum+"<span>";
        }
    },{
        text: '备注',
        dataIndex: 'description',
        width:250
    }],
    bbar: {
        xtype: 'pagingtoolbar',
        displayInfo: true
    },
    listeners:{
                //2.第2步 renderer 创建提示框,并在显示前更新内容
        afterrender:function (cmp, eOpts) {
                //渲染的时候创建提示框
        Ext.create("Ext.tip.ToolTip",{
            target:cmp.getView(),//显示在表格上
            delegate : '.x-grid-cell-inner',//只显示在
            dismissDelay:10000,
            listeners: {
                beforeshow: function updateTipBody(tip) {
                    var el=tip.triggerElement.firstChild;
                    if (el&&el.getAttribute&&el.getAttribute("layoutPlanIdToShowTypeNumTip")){
                        var layoutPlanId=el.getAttribute("layoutPlanIdToShowTypeNumTip");
                        var tipMsg=el.getAttribute("tipMsg");
                        if (tipMsg){
                            tip.update(tipMsg);
                        }else{
                                                        //去后台取值或者直接更新提示内容
                            tip.update("");
                            Ext.Ajax.request({
                                url: 'layoutplan/getDetailNumBySecondType',
                                params:{layoutplanId:layoutPlanId},
                                success: function(response, opts) {
                                    var obj = Ext.decode(response.responseText);
                                    if(obj.success){
                                        tip.update(obj.message);
                                    }else{
                                        Ext.Msg.alert('操作失败',obj.message);
                                    }
                                },
                                failure: function(response, opts) {
                                    Ext.Msg.alert('操作失败',response.status+response.responseText);
                                }
                            });
                        }
                    }else{
                        return false;
                    }
                }
            }
        });
    }
    }
});


登录后即可回复 登录 | 注册
    
关注编程学问公众号