Extjs显示图片

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

1、首先做一个容器

{  
    xtype: 'box', //或者xtype: 'component',  
    width: 100, //图片宽度  
    height: 200, //图片高度  
    autoEl: {  
        tag: 'img',    //指定为img标签  
        src: 'myphoto.gif'    //指定url路径  
    }  
}  



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

2、图片的动态更新


Java代码  收藏代码
//动态更新只需要获取到刚才建立的box的dom的src  
myphoto.getEl().dom.src = newSrc  

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


方案二:

EXT form中加入图片

  • 使用以下扩展便可:
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);  
使用:
new Ext.form.Myimg  
({  
    width : 120,  
    height : 100,  
    src:'uu.bmp'  
}).render(Ext.getBody());  
  
//or  
  
{  
     xtype : 'myimg',  
     width : 120,  
     height : 100,  
     src:'uu.bmp'  
}  


方案三:

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值