• 关于在Ext中Grid中预览图片的实现


      最近在做项目中,需要实现一个在Ext的Grid中预览图片的功能,刚开始以为很简单,但是做起来发现……其实也是很简单的,只是当时没有找准方向

      这里是该把弯路也说一下呢?还是直接上正确思路呢?!走一步算一步吧,毕竟垒砖还是很累的。

      刚开始我这样考虑的,需要在每行中放一个专门用于显示图片的panel,后来这个地方是使用的开发平台的linkColumn,在extApi中找到的事TemplateColumn,应该是封装后的,可以在里边直接写html标签,即<img style="width : 185px; height : 70px;" src="picturePath"></img>,

    每张图片预览都需要一个主键,而这个主键可以使用文件名,由于我当时做上传的时候是使用公司的一个加密文件对文件名和路径都进行了加密的,所以如果直接将查出来的名字(也就是加密后的16进制数)直接放到src中,肯定是无法找到图片的,解密是必然需要做的,文件名取出来了,但是只放文件名绝对是不行,所以需要路径。

      开始的思路是用一个action获得文件路径及文件名,直接放到src上边,可是在怎么放的问题上出现状况,尝试把action直接放到文件名,可是即使在action中定义了返回json格式的路径,也无法获得这个路径啊,后台问了一下韩哥,他说你需要在加载grid的时候已经把文件名取出来了,意思是已经把文件名放到了List中,跟正常的column加载一样,这种思路我之前是没想到的,这就是差距,也可能是我太钻牛角尖了,根本没想到这一步。这样就需要在获取LIst的时候,直接把文件名替换,试过使用替换为绝对路径的方法,可是无论如何都是无法显示的,后来想起来这是一个运行在服务器上的系统,怎么可以直接获取绝对路径进行显示呢?!开始先用死路径写在了src上边,运行,果然图片可以显示,那么就开始在action中获取scheme+server+serverPort+basePath,

    String ContextPath = request.getContextPath();//工程名
    basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+ContextPath;
    ......
    pictureRealPath=basePath+pictureRealPath;//pictureRealPath为文件webcontent下的路径,加上basePath后,便可访问

    然后进行拼接替换,替换过程也遇到了一个问题,那就是“”替换为“/”,以为只要一个转义字符就可以的,试了好几次都不行,后来百度下,有人说用“ ”来转移,可是依旧不行,最后找到篇文章,说用“\\”来匹配,果然如此,后来想想,应该是在进行地址传输的过程中自动将“”替换为了“\”,那么我现在想把这个替换为"/",当然需要把这两个“\”都替换掉,而平常的“”需要用"\"来匹配,那么"\"当然要用"\\"来匹配,

    source.getResourcePicture()).replaceAll("\\", "/")

    所以结果也就出来了,这样把获得的文件名及路径通过变量放到src中,OK!图片一一对应显示,这里注意的问题就是src中加变量需要使用大括号也就是"{resourcePicturePath}"酱紫……

    <img style="width : 185px; height : 70px;" src="{resourcePicture}"></img>

    这次浪费时间的主要原因就是思路不对,没有走在正确的道路上,如果开始就想到在加载前就把文件名路径获得,也不至于这么费劲,还有就是在服务器的文件是需要用url来获得的。

      在这做下记录,提醒下自己“曾经犯下的错”,也给用到的童鞋做个提醒,不要走上弯路!

      革命尚未成功,同志仍须努力!

  • 相关阅读:
    AngularJS双向绑定,手动实施观察
    AngularJS的Hello World
    LESS碎语
    chrome浏览器调试报错:Failed to load resource: the server responsed width a status of 404 (Not Found)…http://127.0.0.1:5099/favicon.ico
    AngularJS报错:[$compile:tpload]
    Javascript中的依赖注入
    使用HTML5和CSS3碎语
    在Brackets中使用Emmet
    使用Brackets
    Bootstrap碎语
  • 原文地址:https://www.cnblogs.com/mecca/p/3632600.html
Copyright © 2020-2023  润新知