`
wjm901215
  • 浏览: 154246 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

EXT中显示图片的组件 - [EXT]

EXT 
阅读更多
var fileUploadPhotoPreview = new Ext.Component({
            id: 'photoPreview',
            xtype: 'textfield',
            //height: 100,
            //width:100,
            autoEl: {
                tag: 'img', src: 'ws_Dell_11_1920x1200.jpg', id: 'photoPreview'
            },
            listeners: { 'render': function() {
                //以下三种表达方式都可以
                //DrawImage(fileUploadPhotoPreview.el.dom, 100, 100);
                //DrawImage(Ext.getCmp("photoPreview").el.dom, 100, 100) ;
                DrawImage(this.el.dom, 100, 100);
            }
            }
        });

另外:
 //显示缩略图
            function DrawImage(ImgD, width_s, height_s) {
                /*var width_s=139;
                var height_s=104;
                */
                var image = new Image();
                image.src = ImgD.src;
                if (image.width > 0 && image.height > 0) {
                    flag = true;
                    if (image.width / image.height >= width_s / height_s) {
                        if (image.width > width_s) {
                            ImgD.width = width_s;
                            ImgD.height = (image.height * width_s) / image.width;
                        } else {
                            ImgD.width = image.width;
                            ImgD.height = image.height;
                        }
                    }
                    else {
                        if (image.height > height_s) {
                            ImgD.height = height_s;
                            ImgD.width = (image.width * height_s) / image.height;
                        } else {
                            ImgD.width = image.width;
                            ImgD.height = image.height;
                        }
                    }
                }
                /*else{
                ImgD.src="";
                ImgD.alt=""
                }*/
            };

注意:可能存在的一个问题,就是默认图片不要太大,否则显示的时候需要提前下载,下载完毕有可能在显示之后,导致显示出来的是原图,不是缩略图


 

分享到:
评论

相关推荐

    bcprov-ext-jdk15on-1.52和bcprov-jdk15on-1.52

    标题中的"bcprov-ext-jdk15on-1.52"和"bcprov-jdk15on-1.52"是两个不同版本的Java软件包,它们都是由The Legion of the Bouncy Castle(Bouncy Castle)组织提供的加密库。Bouncy Castle是一个广泛使用的开源Java...

    bcprov-ext-jdk15on-1.54.jar、bcprov-jdk15on-1.54.jar和ssl-provider-jvm16-0.2.jar

    标题中的"bcprov-ext-jdk15on-1.54.jar"和"bcprov-jdk15on-1.54.jar"是Bouncy Castle提供的Java加密库,用于增强Java平台的安全性。Bouncy Castle是一个开源项目,提供强大的加密算法实现,包括SSL/TLS协议支持,...

    bcprov-ext-jdk15on-1.47.jar.zip

    描述 "bcprov-ext-jdk15on-1.47.jar" 指出,这个 JAR 文件是 Bouncy Castle 提供的扩展库的核心组件,其版本号同样为 1.47,且适用于 JDK 1.5 及更高版本。JAR 文件是 Java 的归档文件格式,通常包含 Java 类、资源...

    bcprov-jdk15on-154/bcprov-ext-jdk15on-154

    标题中的"bcprov-jdk15on-154/bcprov-ext-jdk15on-154"指的是Bouncy Castle提供的Java Cryptography Extension (JCE)提供者的一个版本,该版本支持JDK 1.5及以上版本。Bouncy Castle是一个开源的密码学库,广泛用于...

    bcprov-ext-jdk15on-1.54.jar和bcprov-jdk15on-1.54.jar压缩文件

    《深入解析bcprov-jdk15on与bcprov-ext-jdk15on:Java加密库的秘密武器》 在Java开发中,加密技术是至关重要的,它保障了数据的安全传输和存储。bcprov-jdk15on和bcprov-ext-jdk15on是Bouncy Castle项目提供的两个...

    ext-addons-7.6.0-trial

    "ext-addons-7.6.0-trial" 是一个与ExtJS库相关的扩展包,它提供了7.6.0版本的附加组件。ExtJS是一个基于JavaScript的富客户端框架,广泛用于构建复杂的、数据驱动的Web应用程序。这个"trial"版可能意味着这是一个...

    Ext-JS-4.1-Beta-3.zip

    4. **ext-neptune-debug-w-comments.js, ext-neptune-debug.js**:Neptune是Ext JS 4.x中的一种主题,这些文件提供了Neptune主题的调试版本,带有或不带注释,供开发者在开发过程中使用。 5. **版本Beta 3**:作为...

    ext-d3-pivot-d3-component.zip

    EXT-D3与Pivot-D3是JavaScript库中的两个重要组件,它们在数据可视化和数据分析领域扮演着关键角色。EXT-D3结合了EXT JS的用户界面框架与D3.js的数据操作和可视化能力,而Pivot-D3则进一步扩展了EXT-D3的功能,提供...

    ext-4.1.0-beta-1.zip

    这个"ext-4.1.0-beta-1.zip"文件是ExtJS框架的一个新版本,特别标记为4.1.0 Beta 1,这意味着它包含了该版本的早期测试版,可能包含一些未在正式发行版中出现的功能和改进。 在ExtJS 4.1.0中,开发者可以期待一系列...

    ext-cn-js-beta

    《EXT-CN-JS-BETA:JavaScript编程指南与EXT库深入解析》 在现代Web开发中,JavaScript作为一种强大的脚本语言,扮演着不可或缺的角色。EXT-CN-JS-BETA文档集为JavaScript开发者提供了一份详尽的指南,特别关注EXT...

    ext-----中文字体处理

    这样,EXT组件就可以使用自定义的Web字体了。 在处理中文字符时,还要注意字符编码问题。EXT默认使用UTF-8编码,这是目前最广泛支持的多语言编码方式,可以正确地显示中文字符。确保服务器和HTML页面都设定为UTF-8...

    Ext组件说明 Ext组件概述

    ### Ext组件概述与初学者指南 #### 一、Ext组件概览 Ext是一个功能丰富的JavaScript框架,用于构建桌面级Web应用程序。它提供了大量的组件和工具,使得开发者能够快速且高效地构建用户界面。对于初学者而言,理解...

    EXT 上传图片 删除图片,显示图片,PHP

    3. **图片显示** EXT中,图片可以通过`Ext.image.Image`组件展示。在接收到服务器返回的已存储图片的URL后,可以创建一个新的Image组件,将该URL设置为`src`属性。这通常在服务器响应成功后,由EXT的控制器更新视图...

    bcprov-ext-jdk15on-154.jar和bcprov-jdk15on-154.jar (2)

    为了处理这个问题,我们需要理解相关的知识点并引入适当的库,如标题中提到的`bcprov-ext-jdk15on-154.jar`和`bcprov-jdk15on-154.jar`。 **DH密钥交换**: Diffie-Hellman算法是一种非对称加密技术,用于两个通信...

    ext--grid--demo

    "ext--grid--demo"可能是一个示例项目,展示了如何在Ext JS环境中使用数据网格功能。 在Ext JS中,Grid是用于显示和操作表格数据的核心组件。它支持多种功能,如排序、分页、过滤、编辑等,使得数据管理变得简单。...

    ext-----多选下拉框

    在EXT框架中,"多选下拉框"是一种常见的组件,它允许用户在下拉列表中选择多个选项,而不是仅限于单选。 在EXT中实现多选下拉框,主要涉及到EXT的`ComboBox`组件和`multiSelect`配置项。`ComboBox`是一个灵活的输入...

    ext2.2-API文档-jar-doc

    EXT API文档-jar-doc则包含了所有这些功能的详细说明和示例代码,帮助开发者理解如何在实际项目中应用EXT2.2的各种组件和功能。文档通常会涵盖类的定义、方法、属性、事件以及如何初始化和配置组件等重要内容。...

    ext-4.1.0-beta-2.zip

    `ext-all-dev.js`和`ext-all-debug-w-comments.js`都是EXTJS的完整开发版本,包含所有组件和源代码,并且带有一些调试帮助信息,如行号和注释。`ext-all-debug.js`则是精简版的调试文件,没有注释。这些文件对于开发...

    Ext组件描述,各个组件含义

    ### Ext组件概述与详解 #### 一、Ext基础组件 **1.1 Box Component (Ext.BoxComponent)** - **xtype**: `box` - **功能描述**:Box Component 是一个非常基本的 Ext 组件,主要用于定义具有边框和其他布局属性的...

Global site tag (gtag.js) - Google Analytics