/source/Plug-in/swfupload/FileUploadField.js

  1/*
  2 * Ext JS Library 2.2
  3 * Copyright(c) 2006-2008, Ext JS, LLC.
  4 * licensing@extjs.com
  5 *
  6 * http://extjs.com/license
  7 */
  8
  9
 10Ext.form.FileUploadField = Ext.extend(Ext.form.TextField,  {
 11    /**
 12     * @cfg {String} buttonText The button text to display on the upload button (defaults to
 13     * 'Browse...').  Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text
 14     * value will be used instead if available.
 15     */
 16    buttonText: 'Browse...',
 17    /**
 18     * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
 19     * text field (defaults to false).  If true, all inherited TextField members will still be available.
 20     */
 21    buttonOnly: false,
 22    /**
 23     * @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field
 24     * (defaults to 3).  Note that this only applies if {@link #buttonOnly} = false.
 25     */
 26    buttonOffset: 3,
 27    /**
 28     * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
 29     */
 30
 31    // private
 32    readOnly: true,
 33
 34    /**
 35     * @hide
 36     * @method autoSize
 37     */
 38    autoSize: Ext.emptyFn,
 39
 40    // private
 41    initComponent: function(){
 42        Ext.form.FileUploadField.superclass.initComponent.call(this);
 43
 44        this.addEvents(
 45            /**
 46             * @event fileselected
 47             * Fires when the underlying file input field's value has changed from the user
 48             * selecting a new file from the system file selection dialog.
 49             * @param {Ext.form.FileUploadField} this
 50             * @param {String} value The file value returned by the underlying file input field
 51             */
 52            'fileselected'
 53        );
 54    },
 55
 56    // private
 57    onRender : function(ct, position){
 58        Ext.form.FileUploadField.superclass.onRender.call(this, ct, position);
 59
 60        this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
 61        this.el.addClass('x-form-file-text');
 62        //this.el.dom.removeAttribute('name');
 63
 64//        this.fileInput = this.wrap.createChild({
 65//            id: this.getFileInputId(),
 66//            name: this.name||this.getId(),
 67//            cls: 'x-form-file',
 68//            tag: 'input',
 69//            type: 'button',
 70//            size: 1
 71//        });
 72
 73        var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
 74            text: this.buttonText
 75        });
 76        this.button = new Ext.Button(Ext.apply(btnCfg, {
 77            renderTo: this.wrap,
 78            cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
 79        }));
 80
 81        if(this.buttonOnly){
 82            this.el.hide();
 83            this.wrap.setWidth(this.button.getEl().getWidth());
 84        }
 85
 86        this.button.on('click', function(a,b,c){
 87			var dialog = new UploadDialog({
 88			uploadUrl : '/sa/upload/file.php',
 89			filePostName : 'Filedata',
 90			flashUrl : '/Plug-in/upload/swfupload.swf',
 91			fileSize : '100 MB',
 92			fileTypes : '*.jpg;*.gif;*.bmp;*.png;*.rar;*.zip;*.doc;*.xls;*.ppt;*.txt;*.rmvb;*.rn;*.wmv;*.flv;*.swf',
 93			fileTypesDescription : '????',
 94			opener:this.id,
 95			scope : this
 96			})
 97			dialog.show();
 98        }, this);
 99    },
100
101    // private
102    getFileInputId: function(){
103        return this.id+'-file';
104    },
105
106    // private
107    onResize : function(w, h){
108        Ext.form.FileUploadField.superclass.onResize.call(this, w, h);
109
110        this.wrap.setWidth(w);
111
112        if(!this.buttonOnly){
113            var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
114            this.el.setWidth(w);
115        }
116    },
117
118    // private
119    preFocus : Ext.emptyFn,
120
121    // private
122    getResizeEl : function(){
123        return this.wrap;
124    },
125
126    // private
127    getPositionEl : function(){
128        return this.wrap;
129    },
130
131    // private
132    alignErrorIcon : function(){
133        this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
134    }
135
136});
137Ext.reg('fileuploadfield', Ext.form.FileUploadField);