PDA

View Full Version : Ext.ux.form.FileUploadField: Button just does nothing



wuschba
24 Nov 2010, 1:28 AM
Hello! I use the class Ext.ux.form.FileUploadField from the examples-folder of JsExt 3.3.0. The example works fine, but when adding the code to my form like:



{ xtype: 'fileuploadfield',
fieldLabel: 'Upload file',
id: 'FileUploadId',
emptyText: '',
buttonText: 'Select file',
name: 'FileUpload'
},

just nothing is happening when pressing the 'Select file' button.


I have no idea how to debug this. How is the button to react on the click-event? What should happen in code? I found the creation of the button in the source:


this.button = new Ext.Button(Ext.apply(btnCfg, {
renderTo: this.wrap,
cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
}));

but there are no listeners or anything I could check... Pls help.

Condor
24 Nov 2010, 1:47 AM
The button in FileUploadField is only there to make the input look like a button. When you click on it, you actually click in the <input type="file"> that is transparent and overlayed over the button.

1. Did you include the fileuploadfield.css?
2. FileUploadField needs a width or an anchor.

wuschba
24 Nov 2010, 2:41 AM
Ah, I see: when making the browser-button visible, it was displaced by some other css-code:
input {
width: 300px;
}

Setting:
.x-form-file-wrap .x-form-file {
width:auto;
}
did the trick, so thanks for the hint!