[2.2][INFO REQ] FileUploadField example

[Starfall]

Your example doesn't size well when its width is set to percentage of form's width (e.g. '97%'). Here is a fix (FF3+IE7+Safari+Opera on WinXP, Opera has a slight glitch):


onRender : function(ct, position){
Ext.form.FileUploadField.superclass.onRender.call(this, ct, position);


this.el.setWidth.defer(500,this.el,['80%']);

this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
this.el.addClass('x-form-file-text');
this.el.dom.removeAttribute('name');

this.fileInput = this.wrap.createChild({
id: this.getFileInputId(),
name: this.name||this.getId(),
cls: 'x-form-file',
tag: 'input',
type: 'file',
size: 1
});

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

if(this.buttonOnly){
this.el.hide();
this.wrap.setWidth(this.button.getEl().getWidth());
}

this.fileInput.on('change', function(){
var v = this.fileInput.dom.value;
this.setValue(v);
this.fireEvent('fileselected', this, v);
}, this);
},
This is a temporary solution. As I have mentioned before, sometimes I have been able to see the result I wanted, while playing with the first modification (that was wrapping this.el and this.button with divs). It is clearly a timing issue, at least in FF3.

[Animal]

Can you highlight the areas you changed in red so we can easily see what you did?

[Starfall]

That should do. Sorry for not doing so in the initial post.

[Starfall]

Post updated

[brian.moeskau]

Can you clarify why this is a bug? The example anchors the field to the form, which works as expected. Why are you setting a % width directly inside the component?