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"是两个不同版本的Java软件包,它们都是由The Legion of the Bouncy Castle(Bouncy Castle)组织提供的加密库。Bouncy Castle是一个广泛使用的开源Java...
标题中的"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" 指出,这个 JAR 文件是 Bouncy Castle 提供的扩展库的核心组件,其版本号同样为 1.47,且适用于 JDK 1.5 及更高版本。JAR 文件是 Java 的归档文件格式,通常包含 Java 类、资源...
标题中的"bcprov-jdk15on-154/bcprov-ext-jdk15on-154"指的是Bouncy Castle提供的Java Cryptography Extension (JCE)提供者的一个版本,该版本支持JDK 1.5及以上版本。Bouncy Castle是一个开源的密码学库,广泛用于...
《深入解析bcprov-jdk15on与bcprov-ext-jdk15on:Java加密库的秘密武器》 在Java开发中,加密技术是至关重要的,它保障了数据的安全传输和存储。bcprov-jdk15on和bcprov-ext-jdk15on是Bouncy Castle项目提供的两个...
"ext-addons-7.6.0-trial" 是一个与ExtJS库相关的扩展包,它提供了7.6.0版本的附加组件。ExtJS是一个基于JavaScript的富客户端框架,广泛用于构建复杂的、数据驱动的Web应用程序。这个"trial"版可能意味着这是一个...
4. **ext-neptune-debug-w-comments.js, ext-neptune-debug.js**:Neptune是Ext JS 4.x中的一种主题,这些文件提供了Neptune主题的调试版本,带有或不带注释,供开发者在开发过程中使用。 5. **版本Beta 3**:作为...
EXT-D3与Pivot-D3是JavaScript库中的两个重要组件,它们在数据可视化和数据分析领域扮演着关键角色。EXT-D3结合了EXT JS的用户界面框架与D3.js的数据操作和可视化能力,而Pivot-D3则进一步扩展了EXT-D3的功能,提供...
这个"ext-4.1.0-beta-1.zip"文件是ExtJS框架的一个新版本,特别标记为4.1.0 Beta 1,这意味着它包含了该版本的早期测试版,可能包含一些未在正式发行版中出现的功能和改进。 在ExtJS 4.1.0中,开发者可以期待一系列...
《EXT-CN-JS-BETA:JavaScript编程指南与EXT库深入解析》 在现代Web开发中,JavaScript作为一种强大的脚本语言,扮演着不可或缺的角色。EXT-CN-JS-BETA文档集为JavaScript开发者提供了一份详尽的指南,特别关注EXT...
这样,EXT组件就可以使用自定义的Web字体了。 在处理中文字符时,还要注意字符编码问题。EXT默认使用UTF-8编码,这是目前最广泛支持的多语言编码方式,可以正确地显示中文字符。确保服务器和HTML页面都设定为UTF-8...
### Ext组件概述与初学者指南 #### 一、Ext组件概览 Ext是一个功能丰富的JavaScript框架,用于构建桌面级Web应用程序。它提供了大量的组件和工具,使得开发者能够快速且高效地构建用户界面。对于初学者而言,理解...
3. **图片显示** EXT中,图片可以通过`Ext.image.Image`组件展示。在接收到服务器返回的已存储图片的URL后,可以创建一个新的Image组件,将该URL设置为`src`属性。这通常在服务器响应成功后,由EXT的控制器更新视图...
为了处理这个问题,我们需要理解相关的知识点并引入适当的库,如标题中提到的`bcprov-ext-jdk15on-154.jar`和`bcprov-jdk15on-154.jar`。 **DH密钥交换**: Diffie-Hellman算法是一种非对称加密技术,用于两个通信...
"ext--grid--demo"可能是一个示例项目,展示了如何在Ext JS环境中使用数据网格功能。 在Ext JS中,Grid是用于显示和操作表格数据的核心组件。它支持多种功能,如排序、分页、过滤、编辑等,使得数据管理变得简单。...
在EXT框架中,"多选下拉框"是一种常见的组件,它允许用户在下拉列表中选择多个选项,而不是仅限于单选。 在EXT中实现多选下拉框,主要涉及到EXT的`ComboBox`组件和`multiSelect`配置项。`ComboBox`是一个灵活的输入...
EXT API文档-jar-doc则包含了所有这些功能的详细说明和示例代码,帮助开发者理解如何在实际项目中应用EXT2.2的各种组件和功能。文档通常会涵盖类的定义、方法、属性、事件以及如何初始化和配置组件等重要内容。...
`ext-all-dev.js`和`ext-all-debug-w-comments.js`都是EXTJS的完整开发版本,包含所有组件和源代码,并且带有一些调试帮助信息,如行号和注释。`ext-all-debug.js`则是精简版的调试文件,没有注释。这些文件对于开发...
### Ext组件概述与详解 #### 一、Ext基础组件 **1.1 Box Component (Ext.BoxComponent)** - **xtype**: `box` - **功能描述**:Box Component 是一个非常基本的 Ext 组件,主要用于定义具有边框和其他布局属性的...