几种EXT 显示图片的方法

方法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);

方法2:最简单的方法

{
xtype:'panel',
html:'<img src="http://chenqing24.blog.163.com/blog/xxxx.gif"/>'
}

方法3:

Extjs并没有提供直接的组件来显示图片。网上通过设置textfield的InputType为Image然后再修改dom对象来实现,其 实image的属性值并没有包含在Extjs的官方文档当中。可以通过以下的思路实现,更可以进一步扩展成自定义组件。推荐的方法如下:
  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. }
    1. //动态更新只需要获取到刚才建立的box的dom的src
    2. myphoto.getEl().dom.src=newSrc

你可能感兴趣的:(ext)