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