/src/main/webapp/lib/extjs/docs/source/File.html
HTML | 276 lines | 244 code | 32 blank | 0 comment | 0 complexity | 1f4e0270fd27a74a08b29c3c1dee8bd8 MD5 | raw file
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-form-field-File'>/**
- </span> * @docauthor Jason Johnston <jason@sencha.com>
- *
- * A file upload field which has custom styling and allows control over the button text and other
- * features of {@link Ext.form.field.Text text fields} like {@link Ext.form.field.Text#emptyText empty text}.
- * It uses a hidden file input element behind the scenes to allow user selection of a file and to
- * perform the actual upload during {@link Ext.form.Basic#submit form submit}.
- *
- * Because there is no secure cross-browser way to programmatically set the value of a file input,
- * the standard Field `setValue` method is not implemented. The `{@link #getValue}` method will return
- * a value that is browser-dependent; some have just the file name, some have a full path, some use
- * a fake path.
- *
- * **IMPORTANT:** File uploads are not performed using normal 'Ajax' techniques; see the description for
- * {@link Ext.form.Basic#hasUpload} for details.
- *
- * # Example Usage
- *
- * @example
- * Ext.create('Ext.form.Panel', {
- * title: 'Upload a Photo',
- * width: 400,
- * bodyPadding: 10,
- * frame: true,
- * renderTo: Ext.getBody(),
- * items: [{
- * xtype: 'filefield',
- * name: 'photo',
- * fieldLabel: 'Photo',
- * labelWidth: 50,
- * msgTarget: 'side',
- * allowBlank: false,
- * anchor: '100%',
- * buttonText: 'Select Photo...'
- * }],
- *
- * buttons: [{
- * text: 'Upload',
- * handler: function() {
- * var form = this.up('form').getForm();
- * if(form.isValid()){
- * form.submit({
- * url: 'photo-upload.php',
- * waitMsg: 'Uploading your photo...',
- * success: function(fp, o) {
- * Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
- * }
- * });
- * }
- * }
- * }]
- * });
- */
- Ext.define('Ext.form.field.File', {
- extend: 'Ext.form.field.Trigger',
- alias: ['widget.filefield', 'widget.fileuploadfield'],
- alternateClassName: ['Ext.form.FileUploadField', 'Ext.ux.form.FileUploadField', 'Ext.form.File'],
- requires: [
- 'Ext.form.field.FileButton'
- ],
- //<locale>
- <span id='Ext-form-field-File-cfg-buttonText'> /**
- </span> * @cfg {String} buttonText
- * The button text to display on the upload button. Note that if you supply a value for
- * {@link #buttonConfig}, the buttonConfig.text value will be used instead if available.
- */
- buttonText: 'Browse...',
- //</locale>
- <span id='Ext-form-field-File-cfg-buttonOnly'> /**
- </span> * @cfg {Boolean} buttonOnly
- * True to display the file upload field as a button with no visible text field. If true, all
- * inherited Text members will still be available.
- */
- buttonOnly: false,
- <span id='Ext-form-field-File-cfg-buttonMargin'> /**
- </span> * @cfg {Number} buttonMargin
- * The number of pixels of space reserved between the button and the text field. Note that this only
- * applies if {@link #buttonOnly} = false.
- */
- buttonMargin: 3,
-
- <span id='Ext-form-field-File-cfg-clearOnSubmit'> /**
- </span> * @cfg {Boolean} clearOnSubmit
- * True to clear the selected file value when the form this field belongs to
- * is submitted to the server.
- */
- clearOnSubmit: true,
- <span id='Ext-form-field-File-cfg-buttonConfig'> /**
- </span> * @cfg {Object} buttonConfig
- * A standard {@link Ext.button.Button} config object.
- */
- <span id='Ext-form-field-File-event-change'> /**
- </span> * @event change
- * 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
- */
- <span id='Ext-form-field-File-property-fileInputEl'> /**
- </span> * @property {Ext.Element} fileInputEl
- * A reference to the invisible file input element created for this upload field. Only populated after this
- * component is rendered.
- */
- <span id='Ext-form-field-File-property-button'> /**
- </span> * @property {Ext.button.Button} button
- * A reference to the trigger Button component created for this upload field. Only populated after this component is
- * rendered.
- */
- <span id='Ext-form-field-File-property-extraFieldBodyCls'> // private
- </span> extraFieldBodyCls: Ext.baseCSSPrefix + 'form-file-wrap',
- <span id='Ext-form-field-File-cfg-readOnly'> /**
- </span> * @cfg {Boolean} readOnly
- * Unlike with other form fields, the readOnly config defaults to true in File field.
- */
- readOnly: true,
- <span id='Ext-form-field-File-property-triggerNoEditCls'> /**
- </span> * Do not show hand pointer over text field since file choose dialog is only shown when clicking in the button
- * @private
- */
- triggerNoEditCls: '',
- <span id='Ext-form-field-File-cfg-componentLayout'> // private
- </span> componentLayout: 'triggerfield',
- <span id='Ext-form-field-File-property-childEls'> // private. Extract the file element, button outer element, and button active element.
- </span> childEls: ['browseButtonWrap'],
- <span id='Ext-form-field-File-method-onRender'> // private
- </span> onRender: function() {
- var me = this,
- id = me.id,
- inputEl;
- me.callParent(arguments);
- inputEl = me.inputEl;
- inputEl.dom.name = ''; //name goes on the fileInput, not the text input
- // render the button here. This isn't ideal, however it will be
- // rendered before layouts are resumed, also we modify the DOM
- // below anyway
- me.button = new Ext.form.field.FileButton(Ext.apply({
- renderTo: id + '-browseButtonWrap',
- ownerCt: me,
- ownerLayout: me.componentLayout,
- id: id + '-button',
- ui: me.ui,
- disabled: me.disabled,
- text: me.buttonText,
- style: me.buttonOnly ? '' : me.getButtonMarginProp() + me.buttonMargin + 'px',
- inputName: me.getName(),
- listeners: {
- scope: me,
- change: me.onFileChange
- }
- }, me.buttonConfig));
- me.fileInputEl = me.button.fileInputEl;
- if (me.buttonOnly) {
- me.inputCell.setDisplayed(false);
- }
- // Ensure the trigger cell is sized correctly upon render
- me.browseButtonWrap.dom.style.width = (me.browseButtonWrap.dom.lastChild.offsetWidth + me.button.getEl().getMargin('lr')) + 'px';
- if (Ext.isIE) {
- me.button.getEl().repaint();
- }
- },
- <span id='Ext-form-field-File-method-getTriggerMarkup'> /**
- </span> * Gets the markup to be inserted into the subTplMarkup.
- */
- getTriggerMarkup: function() {
- return '<td id="' + this.id + '-browseButtonWrap"></td>';
- },
- <span id='Ext-form-field-File-method-onFileChange'> /**
- </span> * @private Event handler fired when the user selects a file.
- */
- onFileChange: function(button, e, value) {
- this.lastValue = null; // force change event to get fired even if the user selects a file with the same name
- Ext.form.field.File.superclass.setValue.call(this, value);
- },
- <span id='Ext-form-field-File-method-setValue'> /**
- </span> * Overridden to do nothing
- * @method
- */
- setValue: Ext.emptyFn,
- <span id='Ext-form-field-File-method-reset'> reset : function(){
- </span> var me = this,
- clear = me.clearOnSubmit;
- if (me.rendered) {
- me.button.reset(clear);
- me.fileInputEl = me.button.fileInputEl;
- if (clear) {
- me.inputEl.dom.value = '';
- }
- }
- me.callParent();
- },
-
- <span id='Ext-form-field-File-method-onShow'> onShow: function(){
- </span> this.callParent();
- // If we started out hidden, the button may have a messed up layout
- // since we don't act like a container
- this.button.updateLayout();
- },
- <span id='Ext-form-field-File-method-onDisable'> onDisable: function(){
- </span> this.callParent();
- this.button.disable();
- },
- <span id='Ext-form-field-File-method-onEnable'> onEnable: function(){
- </span> this.callParent();
- this.button.enable();
- },
- <span id='Ext-form-field-File-method-isFileUpload'> isFileUpload: function() {
- </span> return true;
- },
- <span id='Ext-form-field-File-method-extractFileInput'> extractFileInput: function() {
- </span> var fileInput = this.button.fileInputEl.dom;
- this.reset();
- return fileInput;
- },
-
- <span id='Ext-form-field-File-method-restoreInput'> restoreInput: function(el) {
- </span> var button = this.button;
- button.restoreInput(el);
- this.fileInputEl = button.fileInputEl;
- },
- <span id='Ext-form-field-File-method-onDestroy'> onDestroy: function(){
- </span> Ext.destroyMembers(this, 'button');
- delete this.fileInputEl;
- this.callParent();
- },
- <span id='Ext-form-field-File-method-getButtonMarginProp'> getButtonMarginProp: function() {
- </span> return 'margin-left:';
- }
- });</pre>
- </body>
- </html>