- 浏览: 1431816 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
引入css
#form-file_div { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } #form-file2_div { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); }
创建 formpnel
if (Ext.isIE) { fileConfig = { xtype:'field', inputType:'file', fieldLabel: '上传文件', name: 'file1', id: 'form-file', anchor:'95%' }; } var eform = new Ext.FormPanel({ labelAlign: 'left', frame:true, fileUpload: true, //title: '编辑Bug ; ' + bugName_str, animCollapse:true, labelWidth:70, width: 560, method:'POST', defaults: { anchor: '95%', width:550, msgTarget: 'side' }, items: [window.bugId,window.bugTitle, window.user, { xtype: 'textfield', fieldLabel: '文件名称' , id:'filetitle1', anchor:'95%', name:'title1' },fileConfig, { xtype:'panel', html:'<div id="form-file_div" ext:qtip="TODO"></div><br><br>', title:'图片预览', collapsible:true, hidden:true, id:'form-file_panel' }, window.fullInfo], buttons: [{ text: '确定' , handler:function() { if (eform.form.isValid()) { var originalV = window.fullInfo.getValue(); var originalT = window.bugTitle.getValue(); var originalTfT = Ext.getCmp('filetitle1').getValue(); Ext.getCmp('filetitle1').setValue(encodeURIComponent(originalTfT)); window.fullInfo.setValue(encodeURIComponent(window.fullInfo.getValue())); window.bugTitle.setValue(encodeURIComponent(window.bugTitle.getValue())); eform.form.submit({ url : 'BtsSetBugDO_ext.jsp', success : function(form, action) { //Ext.Msg.alert('成功', '修改成功!'); window.grid.reload(); if (window.grid2 && window.w_bug.isVisible()) { window.grid2.reload(); } }, failure : function(form, action) { window.fullInfo.setValue(originalV); window.bugTitle.bugTitle(originalT); Ext.getCmp('filetitle1').setValue(originalTfT); Ext.Msg.alert('失败', action.result.data.info); }, waitMsg : '正在保存数据,稍后...' }); window.edit_bug.hide(); } else { // Ext.Msg.alert('信息', '请填写完成再提交!'); } } },{ text:'清除文件', handler:function() { clearFile('form-file', 'filetitle1', 'file1'); Ext.getCmp('form-file_panel').hide(); } }] }); window.edit_bug = new Ext.Window( { width: 600, frame: true, //layout:'fit', //autoHeight:true, height: 400, autoScroll:true, title: '编辑Bug : ' + bugName_str, closeAction: 'hide', //modal: true , renderTo: document.body , items:[ eform ] }); if (Ext.isIE) { Ext.getCmp('form-file').getEl().dom.onchange = function() { onchangeFile1(Ext.getCmp('form-file').getEl().dom, 'filetitle1'); preview(Ext.getCmp('form-file').getEl().dom,'form-file'); } }
主要的辅助函数:
function preview(o,name){ //var obj = o; Ext.getCmp(name+"_panel").body.hide(); var newPreview = document.getElementById(name+"_div"); newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = o.value; newPreview.style.width = "400px"; newPreview.style.height = "300px"; Ext.getCmp(name+"_panel").show(); Ext.getCmp(name+"_panel").body.slideIn('l', {stopFx:true,duration:.2}); } function onchangeFile1(o, title) { var obj = o || this; // alert(obj.value); Ext.getCmp(title).setValue(getFileName(obj.value)); } function clearFile(fileId, title, name) { if (Ext.isIE) { document.getElementById('x-form-el-' + fileId).innerHTML = '<input type="file" name="' + name + '" ' + 'id="' + fileId + '"' + ' autocomplete="off" ' + 'size="20" class="x-form-file x-form-field" ' + 'style="width: 470px;" ' + 'onchange=\"onchangeFile1(this,\'' + title + '\');preview(this,\''+fileId+'\');\"/>'; document.getElementById(fileId).value = ''; document.getElementById(title).value = ''; } else { Ext.getCmp(fileId).reset(); } }
这样就完成了 ,图片预览 ,清理图片 等 js form 基本功能 ,当然 firefox 不能预览。。。。
注意 :window 的 layout :'fit' 不能和 autoScroll 一起用 ,用了 fit ,window 就不能 加载图片后 自动出现
滚动条了!!!
发表评论
-
continuation, cps
2013-09-12 16:49 2712起 随着 nodejs 的兴起,异步编程成为一种潮流 ... -
一种基于匹配回朔的 css3 选择器引擎实现
2013-05-07 20:40 3343一种基于匹配回朔的 css3 选择器引擎实现 介绍 C ... -
cubic-bezier 模拟实现
2013-01-05 16:34 14010cubic-bezier 曲线是 css3 动画的一个重要基石 ... -
构建前端 DSL
2012-10-11 22:10 5281目前在传统的软件开 ... -
Get cursor position and coordinates from textarea
2012-04-10 20:50 4922最近需要从 textarea 中获 ... -
兼容 ie 的 transform
2012-02-23 14:00 6330css 2d transform 是 css3 引入的一个新的 ... -
promise api 与应用场景
2012-02-07 17:34 7278promise 是 commonjs 社区中提出的异步规范,其 ... -
closure compiler 代码优化实例
2012-01-08 03:23 2765closure compiler 可以进行不少有意思的优化 ... -
write html parser
2011-12-01 02:48 2844首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取 ... -
获取剪贴板数据
2011-11-07 23:31 6373兼容性: 获取剪贴板数据这块各个浏览器间存在很大的 ... -
url 映射问题
2011-11-07 21:52 3159背景 url mapping 我最早知道是作为 j ... -
tip:如何原生播放声音
2011-10-19 12:45 2888如果不想考虑浏览器间 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2781简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2784场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2197分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 6929作为前端开放的基础安全保证,caja 是目前比较合 ... -
tokenization of html
2011-08-29 22:38 2670html 符号解析问题 场景: 在页面上输出包 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2407这个还是很值得记下,一直存在的很大隐患终于解决,由于在 ie& ... -
循环引用下的深度克隆
2011-08-04 20:39 2228深度复制和浅度复制 是当初初学 c 遇到的第一批问题,似乎使 ... -
模块的静态与动态循环依赖
2011-07-25 03:43 3188场景: 循环依赖 我是不支持的,但现实中似乎又确实需 ...
相关推荐
一个简单的Ext.Window中插入图片的例子,让您轻松掌握在Ext.Window中插入图片(照片)。
Ext_Window用法
EXT上传前先预览一下这个图片
ext 模拟window界面 表格 qq 地图
Ext.Window 通过DIV布局,通过DIV填充window内容,带Ext所需文件。
Ext.Panel API翻译 -------Window属性
NULL 博文链接:https://zhcl321.iteye.com/blog/1317543
从右下角动态弹出window,显示1分钟后自动隐藏,然后再弹出,类似MSN登录提醒。
EXTJS 强大的图片查看器 仿windows照片查看器
EXT 上传图片 删除图片,显示图片,PHP
Ext.window的一个扩展组件SuperWin.js.可灵活自主随意定位,和显示模式;
ext超酷的grid中放图片(ext3.2.1)
EXT 表格 本地分页的例子 EXT 表格 本地分页的例子
EasyExt_003_第一个组件Ext.Window EasyExt_003_第一个组件Ext.Window
Ext4+Servlet/Struts2+HTML5实现实时获取文件上传进度、本地预览、文件拖拽上传的相册实例
2012-05-14更新: 增加了通过资源管理器选择文件功能 修复上传进度显示BUG 增加相片右键菜单 上传更改为上传全部项和上传选中项 增加图片浏览器功能 图片浏览器支持拖动、双击最大化/还原...图片浏览器图片的放大和缩小
想象一下,当你自信地用汉语和你朋友交谈时,他却使用日语的情形。同样沮丧的,你需要记住那些按钮用来回退,那些用来导航,相反的菜单方向,不可理喻的配色等等,你就会开始意识到语言和文化习俗多么重要。...
NULL 博文链接:https://oppovaan.iteye.com/blog/627655
EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT...
运行Microsoft office时,vbe6ext.olb不能加载