Ext 中对 grid cell 单元鼠标移入移出显示隐藏弹窗

最新推荐文章于 2020-04-14 14:42:12 发布

Sukla

最新推荐文章于 2020-04-14 14:42:12 发布

阅读量961

点赞数

分类专栏： Ext.js

本文链接：https://blog.csdn.net/Sukla/article/details/79008385

版权

Ext.js 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

1,效果如下

2,在grid的单元格上设置的listeners onmouseleave 不起作用就用了js的onmouseeleave 代码如下

/**
 * Created by Sukla on 2018/1/8.
 */
Ext.define('GridCellToggleTipsView',{
    extend:'Ext.grid.Panel',
    alias:'widget.gridCellToggleTipsView',
    controller:'gridCellToggleTipsController',
    cls: 'myview-order-management myview-show-tip',
    store:Ext.create('Ext.data.Store',{
        data:[
            {
                name:'苏格拉桂',
                age:30
            },
            {
                name:'Sukla',
                age:2
            },
            {
                name:'GSZH',
                age:5
            }
        ]
    }),
    columns:{
        defaults:{
            flex:1
        },
        items:[
            {
                text:'姓名',
                dataIndex:'name',
                renderer:function(value){
                    return '<p style="padding:0;margin:0" οnmοuseοver="showTips(this)" οnmοuseleave="hideTips(this)">' + value + '</p><div class="my-gridtip my-gridtip-hide"></div>'
                }
            },
            {
                text:'年龄',
                dataIndex:'age'
            }
        ]
    }

})
var showTips=function(item){
    var text=item.textContent;
    var tpl = new Ext.XTemplate(
        '<tpl for=".">',
        '<tpl if="sucstate">',
        '<div class="xtemplate-view-order-management sucstate">',
        '</tpl>',
        '<tpl if="!sucstate">',
        '<div class="xtemplate-view-order-management">',
        '</tpl>',
        '<p class="xtemplate-item xtemplate-item-view-title">{address}</p>',
        '<p class="xtemplate-item xtemplate-item-view-index">{[xindex]}</p>',
        '<p class="xtemplate-item">{birthday}</p>',
        '<div class="xtemplate-item xtemplate-item-view-statetext">{includetext}</div>',
        '</div>',
        '</tpl>'
    )
    var data={
        items:[
            {
                address:'法海寺底',
                birthday:'19940108',
                includetext:'代码抄袭',
                sucstate:true
            },
            {
                address:'香炉峰顶',
                birthday:'20170808',
                includetext:'夕阳西下',
                sucstate:true
            },
            {
                address:'大马路上',
                birthday:'20180101',
                includetext:'睡到11点',
                sucstate:false
            }
        ]
    }
    tpl.overwrite(item.nextSibling, data.items);
    item.nextSibling.classList.remove("my-gridtip-hide");
}
var hideTips=function(item){
    item.nextSibling.classList.add("my-gridtip-hide");
}

3,css

.myview-order-management .xtemplate-view-order-management{
    display:block;
    float: left;
    width:120px;
    height: 120px;
    word-wrap: break-word;
    background-color: #fff !important;
    background-image: url(images/khjz/icon-line-bg-x-default.png) !important;
    background-size: 12px 9px;
    background-repeat: repeat-x;
    background-position: center 25px;
}
.xtemplate-view-order-management .xtemplate-item{
    padding:0;
    margin:0;
    text-align: center;
    line-height: 20px;
    min-height: 20px;
    color: #666666;
}
.xtemplate-view-order-management.sucstate{
    background-image: url(images/khjz/icon-line-bg-x.png) !important;
}
.xtemplate-view-order-management.sucstate .xtemplate-item{
    color: orange;
}
.xtemplate-item.xtemplate-item-view-title{
    font-size: 15px;
}
.xtemplate-item.xtemplate-item-view-index{
    height: 20px;
    width: 20px;
    margin: 0 auto;
    display: block;
    border-radius: 50%;
    color: #ffffff!important;
    background-color: #aaaaaa !important;
}
.xtemplate-view-order-management.sucstate .xtemplate-item.xtemplate-item-view-index{
    background-color: #22bd7a !important;
}

.xtemplate-item.xtemplate-item-view-statetext{
    width: 120px;
    height: 60px;
    white-space: pre-wrap;
}

.myview-show-tip .my-gridtip{
    position: fixed;
    z-index: 399;
    max-width: 602px;
    min-height: 122px;
    border:1px solid #e5e5e5;
    background-color: #e5e5e5;
    border-radius: 5px;
}
.myview-show-tip .my-gridtip-hide{
    display: none;
}