extjs 上传文件 fileUpload代码,JS代码库,德仔网

代码语言

代码分类

【JS】 extjs 上传文件 fileUpload

作者:珍冰 / 发布于2014/10/13/ 587

上传文件要是用asp.net的控件上传其实是很简单的问题，要是为了用户体验的提高很多的web开发人员都会采取很炫的ajax上传。或是用flash想用的控件上传。今天我们看看extjs中如何很炫的上传文件或图片。查了查资料发现extjs上传文件需要一个js文件FileUploadField.js，在extjs类库文件里可以找到


	/*!
	* Ext JS Library 3.2.0
	* Copyright(c) 2006-2010 Ext JS, Inc.
	* licensing@extjs.com
	* http://www.extjs.com/license
	*/
	Ext.ns('Ext.ux.form');

	/**
	* @class Ext.ux.form.FileUploadField
	* @extends Ext.form.TextField
	* Creates a file upload field.
	* @xtype 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: 'Browse...',
	 /**
	 * @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(){
	 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 {Ext.ux.form.FileUploadField} this
	 * @param {String} value The file value returned by the underlying file input field
	 */
	 'fileselected'
	 );
	 },

	 // 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);

	// backwards compat
	Ext.form.FileUploadField = Ext.ux.form.FileUploadField;

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　fileUpload　　上传文件　

同语言下

可能有用的

珍冰贡献的其它代码(12)