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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 之前在Sencha Cmd创建Ext JS示例项目演示了用Sencha Cmd来创建一个Login示例。在这里会演...
    写意悠悠阅读 8,940评论 4 24
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • 我是米茶,这是我的第1篇原创文章,与你共享。 旅行最大的乐趣就是吃。 前些天我去了贵州,回来最念念不忘的不是凯里的...
    米茶_阅读 289评论 0 1
  • 我在法国的生活开始忙碌了起来,星期一的早上,老姑夫来开车接我去做身体检测,然后我们又拿着一大堆的证明来到巴黎警...
    安赛33阅读 314评论 0 0
  • 进入高中了 面临着舍友关系 学习压力和青春期烦恼 那年进如了一所普通的高中 儿时的玩伴各奔东西 第一次住校区离开父...
    robye阅读 140评论 0 1