Extjs显示图片
来源:互联网 发布:9.9包邮淘宝u站 编辑:程序博客网 时间:2024/06/05 16:18
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、图片的动态更新
- //动态更新只需要获取到刚才建立的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
0 0
- extjs动态显示图片
- extjs 动态显示图片
- Extjs显示图片
- Extjs显示图片
- Extjs显示图片
- Extjs显示图片
- Extjs显示图片
- ExtJs显示图片
- extjs动态显示图片
- Extjs 表单 显示图片 + 上传
- Extjs formPanel 显示图片 + 上传
- Extjs图片上传显示预览
- Extjs中图片显示混乱的解决方法
- EXTJS 根据值显示不同图片
- extjs+MVC架构下的图片显示
- Extjs 内网环境 图片无法显示问题
- ExtJS在生成Tree时图片不显示问题
- 在ExtJs的容器中显示图片,并动态更新
- sqlserver数据导入mysql三: 把生成的表分成几份(拆分成几份运行)
- 学习笔记(三): Session的基本使用
- HHVM2.4基准测试
- 手机分辨率PPI和DPI的区别
- Learning Node.js - 知识收集
- Extjs显示图片
- 如何自己定制iOS框架(framework)
- loadrunner安装错误
- 黑马程序员 反射的各种应用
- C++指针
- IOS表情编码
- 数据库事务
- Linear dynamic texture
- Java并发编程6-final