File.html
10 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!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'],
uses: ['Ext.button.Button', 'Ext.layout.component.field.Field'],
//<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-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-cfg-fieldBodyCls'> /**
</span> * @cfg {String} [fieldBodyCls='x-form-file-wrap']
* An extra CSS class to be applied to the body content element in addition to {@link #fieldBodyCls}.
*/
fieldBodyCls: 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: '',
// private
componentLayout: 'triggerfield',
// private. Extract the file element, button outer element, and button active element.
childEls: ['fileInputEl', 'buttonEl', 'buttonEl-btnEl', 'browseButtonWrap'],
// private
onRender: function() {
var me = this,
inputEl;
me.callParent(arguments);
inputEl = me.inputEl;
inputEl.dom.name = ''; //name goes on the fileInput, not the text input
me.fileInputEl.dom.name = me.getName();
me.fileInputEl.on({
scope: me,
change: me.onFileChange
});
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.buttonEl.getMargin('lr')) + 'px';
if (Ext.isIE) {
me.buttonEl.repaint();
}
},
<span id='Ext-form-field-File-method-getTriggerMarkup'> /**
</span> * Gets the markup to be inserted into the subTplMarkup.
*/
getTriggerMarkup: function() {
var me = this,
result,
btn = Ext.widget('button', Ext.apply({
id: me.id + '-buttonEl',
ui: me.ui,
disabled: me.disabled,
text: me.buttonText,
cls: Ext.baseCSSPrefix + 'form-file-btn',
preventDefault: false,
style: me.buttonOnly ? '' : 'margin-left:' + me.buttonMargin + 'px'
}, me.buttonConfig)),
btnCfg = btn.getRenderTree(),
inputElCfg = {
id: me.id + '-fileInputEl',
cls: Ext.baseCSSPrefix + 'form-file-input',
tag: 'input',
type: 'file',
size: 1
};
if (me.disabled) {
inputElCfg.disabled = true;
}
btnCfg.cn = inputElCfg;
result = '<td id="' + me.id + '-browseButtonWrap">' + Ext.DomHelper.markup(btnCfg) + '</td>';
btn.destroy();
return result;
},
<span id='Ext-form-field-File-method-createFileInput'> /**
</span> * @private
* Creates the file input element. It is inserted into the trigger button component, made
* invisible, and floated on top of the button's other content so that it will receive the
* button's clicks.
*/
createFileInput : function() {
var me = this;
me.fileInputEl = me.buttonEl.createChild({
name: me.getName(),
id: me.id + '-fileInputEl',
cls: Ext.baseCSSPrefix + 'form-file-input',
tag: 'input',
type: 'file',
size: 1
});
me.fileInputEl.on({
scope: me,
change: me.onFileChange
});
},
<span id='Ext-form-field-File-method-onFileChange'> /**
</span> * @private Event handler fired when the user selects a file.
*/
onFileChange: function() {
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, this.fileInputEl.dom.value);
},
<span id='Ext-form-field-File-method-setValue'> /**
</span> * Overridden to do nothing
* @method
*/
setValue: Ext.emptyFn,
reset : function(){
var me = this;
if (me.rendered) {
me.fileInputEl.remove();
me.createFileInput();
me.inputEl.dom.value = '';
}
me.callParent();
},
onDisable: function(){
this.callParent();
this.disableItems();
},
disableItems: function(){
var file = this.fileInputEl;
if (file) {
file.dom.disabled = true;
}
this['buttonEl-btnEl'].dom.disabled = true;
},
onEnable: function(){
var me = this;
me.callParent();
me.fileInputEl.dom.disabled = false;
this['buttonEl-btnEl'].dom.disabled = false;
},
isFileUpload: function() {
return true;
},
extractFileInput: function() {
var fileInput = this.fileInputEl.dom;
this.reset();
return fileInput;
},
onDestroy: function(){
Ext.destroyMembers(this, 'fileInputEl', 'buttonEl');
this.callParent();
}
});</pre>
</body>
</html>