ExtJs文件上传(Ext.ux.form.FileUploadField)
Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, {
/**
* @cfg {String} buttonText The button text to display on the upload button (defaults to
* 'Browse...'). Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text
* value will be used instead if available.
*/
buttonText : '文件上传',
/**
* @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
* text field (defaults to false). If true, all inherited TextField members will still be available.
*/
buttonOnly : false,
/**
* @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field
* (defaults to 3). Note that this only applies if {@link #buttonOnly} = false.
*/
buttonOffset : 3,
/**
* @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
*/
// private
readOnly : true,
/**
* @hide
* @method autoSize
*/
autoSize : Ext.emptyFn,
// private
initComponent : function() {
this.renderTo = this.applyTo || this.renderTo;
delete this.applyTo;
var oldel = Ext.fly(this.renderTo);
if (oldel&&oldel.dom.type && oldel.dom.type == "file") {
var id = oldel.dom.id;
this.width = oldel.getWidth() || 200;
Ext.apply(this, this.getConfig(oldel.dom));
var parent = oldel.parent();
oldel.remove();
parent.dom.innerHTML='<div id="'+this.id + '-renderto'+'"></div>';
this.renderTo = this.id + '-renderto';
}
Ext.ux.form.FileUploadField.superclass.initComponent.call(this this.addEvents( /**
* @event fileselected
* Fires when the underlying file input field's value has changed from the user
* selecting a new file from the system file selection dialog.
* @param {XY.form.FileUploadField} this
* @param {String} value The file value returned by the underlying file input field
*/
'fileselected');
},
getConfig : function(dom) {
return {
// applyTo : dom.id,
icoCls : dom.className
//id : dom.id,
//tabIndex : dom.tabIndex
}
},
// private
onRender : function(ct, position) {
Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct,
position);
this.wrap = this.el.wrap({
cls : 'x-form-field-wrap x-form-file-wrap'
});
this.el.addClass('x-form-file-text');
this.el.dom.removeAttribute('name');
this.createFileInput();
var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
text : this.buttonText
});
this.button = new Ext.Button(Ext.apply(btnCfg, {
renderTo : this.wrap,
cls : 'x-form-file-btn'
+ (btnCfg.iconCls ? ' x-btn-icon' : '')
}));
if (this.buttonOnly) {
this.el.hide();
this.wrap.setWidth(this.button.getEl().getWidth());
}
this.bindListeners();
this.resizeEl = this.positionEl = this.wrap;
},
bindListeners : function() {
this.fileInput.on({
scope : this,
mouseenter : function() {
this.button.addClass(['x-btn-over',
'x-btn-focus'])
},
mouseleave : function() {
this.button.removeClass(['x-btn-over',
'x-btn-focus', 'x-btn-click'])
},
mousedown : function() {
this.button.addClass('x-btn-click')
},
mouseup : function() {
this.button.removeClass(['x-btn-over',
'x-btn-focus', 'x-btn-click'])
},
change : function() {
var v = this.fileInput.dom.value;
this.setValue(v);
this.fireEvent('fileselected', this, v);
}
});
},
createFileInput : function() {
this.fileInput = this.wrap.createChild({
id : this.getFileInputId(),
name : this.name || this.getId(),
cls : 'x-form-file',
tag : 'input',
type : 'file',
size : 1
});
},
reset : function() {
this.fileInput.remove();
this.createFileInput();
this.bindListeners();
Ext.ux.form.FileUploadField.superclass.reset.call(this);
},
// private
getFileInputId : function() {
return this.id + '-file';
},
// private
onResize : function(w, h) {
Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);
this.wrap.setWidth(w);
if (!this.buttonOnly) {
var w = this.wrap.getWidth()
- this.button.getEl().getWidth()
- this.buttonOffset;
this.el.setWidth(w);
}
},
// private
onDestroy : function() {
Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
Ext.destroy(this.fileInput, this.button, this.wrap);
},
onDisable : function() {
Ext.ux.form.FileUploadField.superclass.onDisable.call(this);
this.doDisable(true);
},
onEnable : function() {
Ext.ux.form.FileUploadField.superclass.onEnable.call(this);
this.doDisable(false);
},
// private
doDisable : function(disabled) {
this.fileInput.dom.disabled = disabled;
this.button.setDisabled(disabled);
},
// private
preFocus : Ext.emptyFn,
// private
alignErrorIcon : function() {
this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
}
});
Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);
jsp页面的代码如下:
<input id="attachFileInfo" name="attachFileInfo" type="file"/>
注:Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);
fileuploadfield:为input中的id;
Ext.ux -----> XY
ExtJs文件上传(Ext.ux.form.FileUploadField)的更多相关文章
- 自定义ExtJS文件上传
日常工作中,一般文件上传都是跟随表单一起提交的,但是遇到form表单中有许多地方有文件上传时这种方式却不是很适用,以下是我工作中用的文件上传方式: { xtype: 'fileuploadfield' ...
- struts2+extjs文件上传完整实现(攻克了上传中的各种问题)
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/shanhuhau/article/details/28617999 首先须要引入上传控件 <s ...
- PHP+ExtJS 文件上传示例
xtJS 4 有一个非常方便的文件上传组件,可以用来将文件上传到服务器.本文PHP教程UncleToo将介绍使用PHP和ExtJS实现文件上传功能. 首先,创建文件上传组件Ext.form.Panel ...
- Extjs文件上传问题总结
本来文件上传是一个简单而常用的功能,但是,由于刚刚接触extjs,对extjs中的控件及其使用方法并不熟悉,导致本来一个很快就可以搞定的文件上传问题,弄了将近两天的时间.现将问题及解决办法发出来,供有 ...
- extjs文件上传
EXT学习教程:http://www.cnblogs.com/iamlilinfeng/category/385121.html Ext文件上传: 例子用到的jar: 1.upload.js /* ...
- Extjs 文件上传
function fromExcel(){ var dxjgdm_sel = Ext.get("dxjgdm").getValue(); var dxjglx_sel = Ext. ...
- js文件上传原理(form表单 ,FormData + XHR2 + FileReader + canvas)
目录 form表单上传 FormData + XHR2 + FileReader + canvas 无刷新本地预览压缩上传实例 目前实现上传的方式 浏览器小于等于IE9(低版本浏览器)使用下面的方式实 ...
- Spring MVC 文件上传简单示例(form、ajax方式 )
1.Form Upload SpringMVC 中,文件的上传是通过 MultipartResolver 实现的,所以要实现上传,只要注册相应的 MultipartResolver 即可. Multi ...
- 文件上传时jquery.form.js中提示form.submit SCRIPT5: 拒绝访问
利用其它控件触发file的click事件来选择文件后,使用jquery.form.js中的submit方法提交时IE报错:form.submit SCRIPT5: 拒绝访问,其它浏览器正常, < ...
随机推荐
- Bootstrap学习(一)
Bootstrap就是对jQuery的一次再开发,所以jQuery脚本引用必须在bootstrap脚本之前. 链接:http://www.cnblogs.com/vvjiang/p/5189804.h ...
- 恶趣味小游戏 I'm hungry
之前学算法的时候无聊做了个游戏放松放松,现在传到了github以免电脑坏了就永远丢失了... github地址:https://github.com/BenDanChen/IamHungry I am ...
- 20145206《Java程序设计》第10周学习总结
20145206 <Java程序设计>第10周学习总结 博客学习内容总结 什么是网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定 ...
- DOM - EventListener 句柄操作
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- 与你相遇好幸运,mbview的mbtiles文件分析
mbview是一个查看.mbtiles文件的本地程序. https://github.com/mapbox/mbview .mbtiles文件就是一个Sqlite文件,用Navicat Premium ...
- forEach 方法 (Array) (JavaScript)
为数组中的每个元素执行指定操作. 语法 array1.forEach(callbackfn[, thisArg]) 参数 参数 定义 array1 必选.一个数组对象. callbackfn 必选.最 ...
- [LeetCode] Valid Parentheses
Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...
- css2
CSS 实现div宽度根据内容自适应 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- base64编码、解码的C语言实现
转自:http://www.cnblogs.com/yejianfei/archive/2013/04/06/3002838.html base64是一种基于64个可打印字符来表示二进制数据的表示方法 ...
- Liferay 6.2 改造系列之四:重新整理Application添加页面默认提供的Portlet清单
经过2.3两步后,剩余Portlet已经不多,添加Application页面如下: 将用不到的Portlet隐藏起来:11 Portal目录 (Portal Directory) 将内嵌Protl ...