I'm using extJS4 for my GUI and thus also to display the file upload dialog. In the end I want to only have a button which when I click it it displays the file upload dialog, and when I select something there it automatically uploads the file.
For the automatic "submit" I know that I must write a handler for the onChange event of the file upload dialog. Thus this is not the problem. But is there a way to disable the textfield without having to resort to CSS? (when I select a file to upload the name is written into the textfield....and I want to either eliminate the textfield or at least make it invisible).
The property you search is buttonOnly: true
Here you find the documentation
Just add it to the example like this:
Ext.create('Ext.form.Panel', {
title: 'Upload a Photo',
width: 400,
bodyPadding: 10,
frame: true,
renderTo: Ext.getBody(),
items: [{
xtype: 'filefield',
buttonOnly: true,
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.');
}
});
}
}
}]
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.