Extjs显示图片

系统管理员 2021-09-10 06:48 547阅读 0赞

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

1、首先做一个容器

Js代码   ![收藏代码][icon_star.png]

1.  \{  
2.      xtype: 'box', //或者xtype: 'component',  
3.      width: 100, //图片宽度  
4.      height: 200, //图片高度  
5.      autoEl: \{  
6.          tag: 'img',    //指定为img标签  
7.          src: 'myphoto.gif'    //指定url路径  
8.      \}  
9.  \}

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

2、图片的动态更新

Java代码   ![收藏代码][icon_star.png]

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

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

方案二：

### [EXT form中加入图片][EXT form] ###

使用以下扩展便可：

Js代码代码   ![收藏代码][icon_star.png 1]

1.  Ext.form.Myimg = Ext.extend(Ext.BoxComponent, \{     
2.      onRender : function(ct, position)\{     
3.          if(!this.el)\{     
4.              this.el = document.createElement('img');                 
5.              this.el.src = this.src;     
6.              if(this.forId)\{     
7.                  this.el.setAttribute('htmlFor', this.forId);     
8.              \}     
9.          \}     
10.         Ext.form.Label.superclass.onRender.call(this, ct, position);     
11.     \}     
12. \});    
13. Ext.reg('myimg', Ext.form.Myimg);

使用：

Java代码   ![收藏代码][icon_star.png 1]

1.  **new** Ext.form.Myimg  
2.  (\{  
3.      width : 120,  
4.      height : 100,  
5.      src:'uu.bmp'  
6.  \}).render(Ext.getBody());  
7.    
8.  //or  
9.    
10. \{  
11.      xtype : 'myimg',  
12.      width : 120,  
13.      height : 100,  
14.      src:'uu.bmp'  
15. \}

方案三：

xtype:'textfield',fieldLabel:'图片',   
width:130,height:114,style:'background-image:url(./1.jpg);background-repeat: no-repeat;',readOnly:true

[icon_star.png]: /images/20210726/9e5ed51e42104872b97ab3ddf47ed13f.png
[EXT form]: http://czpae86.iteye.com/blog/300605
[icon_star.png 1]: /images/20210726/77fae7d7e97042f38fead6512ebe2718.png