Extjs 显示图片方法

方法1:创建一个组件

Ext.form.Myimg = Ext.extend(Ext.BoxComponent, {

onRender : function(ct, position){

if(!this.el){

this.el = document.createElement('img');

this.el.src =this.src;

if(this.forId){

this.el.setAttribute('htmlFor',this.forId);

}

}

Ext.form.Label.superclass.onRender.call(this, ct, position);

}

});

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的官方文档当中。可以通过以下的思路实现,更可以进一步扩展成自定义组件。推荐的方法如下:

{

xtype:'box',//或者xtype: 'component',

width:100,//图片宽度

height:200,//图片高度

autoEl: {

tag:'img',//指定为img标签

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

}

}

//动态更新只需要获取到刚才建立的box的dom的src

myphoto.getEl().dom.src = newSrc

你可能感兴趣的:(Extjs 显示图片方法)