JEPaas知识点_列表模块

ExtJS图片预览功能实现

最新推荐文章于 2022-04-05 21:06:00 发布

原创最新推荐文章于 2022-04-05 21:06:00 发布 · 414 阅读

0 ·

CC 4.0 BY-SA版权

JEPAAS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用ExtJS框架通过两种方式实现图片预览功能：一种是在某字段设置超链接并单击后自动弹出预览；另一种是当鼠标放置到指定字段后自动显示预览图。具体实现涉及ExtJS事件绑定及JE.File.doAct方法调用。

一、图片预览

1、某行某字段设置超链接，单击后自动弹出预览图
列事件中设置超链接事件，如下

var DEVICE_PICTURE = record.get('DEVICE_PICTURE').split('*');
JE.File.doAct('preview','','',DEVICE_PICTURE[1],DEVICE_PICTURE[0]);

2、实现鼠标放置到某行某字段后，自动弹出预览图
列表JS事件中设置itemmouseenter事件，如下

function(view,record,item,index, e,eOpts){
    var classList = e.target.classList;
    var flag = false;
    Ext.each(classList,function(item,index){
        if('x-grid-cell-DEVICE_CODE' == item){
            flag = true;
            return false;
        }
    });
    if(!flag){
        var parentClassList = e.target.parentElement.classList;
        Ext.each(parentClassList,function(item,index){
        if('x-grid-cell-DEVICE_CODE' == item){
            flag = true;
            return false;
        }
    });
    }
    if(flag){
        var DEVICE_PICTURE = record.get('DEVICE_PICTURE').split('*');
        JE.File.doAct('preview','','',DEVICE_PICTURE[1],DEVICE_PICTURE[0]);
    }
}