在ExtJs的容器中显示图片，并动态更新

    Extjs并没有提供直接的组件来显示图片。网上通过设置textfield的InputType为Image然后再修改dom对象来实现，其实image的属性值并没有包含在Extjs的官方文档当中。可以通过以下的思路实现，更可以进一步扩展成自定义组件。推荐的方法如下:

1、首先做一个容器

{
    xtype: 'box', //或者xtype: 'component',
    width: 100, //图片宽度
    height: 200, //图片高度
    autoEl: {
        tag: 'img',    //指定为img标签
        src: 'myphoto.gif'    //指定url路径
    }
}

 这样就在panel或者其他的容器里面显示图片了

2、图片的动态更新

 

//动态更新只需要获取到刚才建立的box的dom的src
myphoto.getEl().dom.src = newSrc

 这样就实现了显示与动态更新

评论

15 楼 liyan06 2012-03-08  

楼主，我是个初学者，如果那个图片是用servlet生成，然后到指定的url，那最后一句  
myphoto.getEl().dom.src = newSrc ，这一句代码是在哪里写的啊？

14 楼 nbkangta 2011-06-06  

SongQi 写道

SongQi 写道

xtype : 'box',  
id : 'logoPicid',
fieldLabel: '图片预览',
width : 150,  
height : 100,  
autoEl : {
    tag : 'img',
src : '/attachment/image/20110527163130.gif',    
style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);' 
}


Ext.getCmp('logoPicid').getEl().dom.src = "/attachment/image/20110524164859.gif";
这样不行Ext.getCmp('logoPicid').getEl().dom.src 为空或不为对象 求解决下

    版本 3.3.1

09年的东西，我现在也很久没弄extjs了，呵呵，建议通过firebug调试一下，也许在新的版本中已经去掉了类似属性或者方法，不好意思

13 楼 SongQi 2011-05-27  

SongQi 写道

xtype : 'box',  
id : 'logoPicid',
fieldLabel: '图片预览',
width : 150,  
height : 100,  
autoEl : {
    tag : 'img',
src : '/attachment/image/20110527163130.gif',    
style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);' 
}


Ext.getCmp('logoPicid').getEl().dom.src = "/attachment/image/20110524164859.gif";
这样不行Ext.getCmp('logoPicid').getEl().dom.src 为空或不为对象 求解决下

    版本 3.3.1

12 楼 SongQi 2011-05-27  

xtype : 'box',  
id : 'logoPicid',
fieldLabel: '图片预览',
width : 150,  
height : 100,  
autoEl : {
    tag : 'img',
src : '/attachment/image/20110527163130.gif',    
style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);' 
}


Ext.getCmp('logoPicid').getEl().dom.src = "/attachment/image/20110524164859.gif";
这样不行Ext.getCmp('logoPicid').getEl().dom.src 为空或不为对象 求解决下

11 楼 whflovecn 2011-01-03  

如果图片是二进制流存在oracle的blob字段中该怎么解决？

10 楼 nbkangta 2010-05-19  

sssgon 写道

您好，我想问下LZ代码里面的
myphoto是什么？
我的box组件放在formpanel中，然后我使用FormPanel的名字不行

你要更新的是box组件里面的图片
当然myphoto指的是存放box的变量名称

9 楼 sssgon 2010-05-19  

您好，我想问下LZ代码里面的
myphoto是什么？
我的box组件放在formpanel中，然后我使用FormPanel的名字不行

8 楼 生于菇乡 2010-04-22  

这是3.0的，我用的是2.0 。
autoEl属性不能用，
郁闷

7 楼 blueyanghualong 2009-10-27  

哥们你在不 问你个问题哦？
我现在用你的东西？
只是我图片上传到D:\java\apache-tomcat-6.0.18\webapps\pushvod\upload\11.jpg
后
# { 
#     xtype: 'box', //或者xtype: 'component', 
#     width: 100, //图片宽度 
#     height: 200, //图片高度 
#     autoEl: { 
#         tag: 'img',    //指定为img标签 
#         src: 'D:\java\apache-tomcat-6.0.18\webapps\pushvod\upload\11.jpg
后'    //指定url路径 
#     } 
# }
图片不显示 这是为什么呢？
谢谢

6 楼 nbkangta 2009-08-14  

king520 写道

请问这个放图片显示是放在
pannel里面还是直接用一个textField就可以了呢？

我用的是把图片放在一个box组件里面
当然你也可以再panel当中这么用，panel继承自box
希望能对你有帮助，呵呵

5 楼 nbkangta 2009-08-14  

zhujs 写道

src: 'myphoto.gif'    //指定url路径

src 路径中又中文不能正常显示,怎么回事

有中文不能显示是Application Server的问题
如果是tomcat，推荐你修改两处代码的设置
首先修改server.xml，在connector 8080加上属性URIEncoding="UTF-8",这样AS就能对中文指向的URL资源进行寻址
然后页面和JS采用UTF-8编码
不知道能不能解决你的问题，呵呵

4 楼 king520 2009-08-11  

请问这个放图片显示是放在
pannel里面还是直接用一个textField就可以了呢？

3 楼 zhujs 2009-07-31  

src: 'myphoto.gif'    //指定url路径

src 路径中又中文不能正常显示,怎么回事

2 楼 nbkangta 2009-06-20  

阳光雨露 写道

哥们儿，你能不能写的详细一点呀

这个应该已经写的蛮详细的了吧？你有问题的话我们私下交流吧

1 楼 阳光雨露 2009-06-12  

哥们儿，你能不能写的详细一点呀