PDA

View Full Version : File Upload Field icon issue



legrego
30 Mar 2011, 7:39 AM
Hello,

I am using the File Upload Field bundled ux in a toolbar, under ExtJS 3.3.1.
config:

var uploadButton = new Ext.form.FileUploadField({
name : 'filedata',
buttonCfg : {
iconCls : 'new',
cls: 'x-btn-text-icon',
text : 'Upload'
},
buttonOnly : true,
});

The icon renders underneath the button text (i.e, no padding to offset the icon). Also, the size of the button just encapsulates the icon, not the button text itself. See attached.25423

I have verified that all required stylesheets, etc are linked correctly. I have attached the icon class as reported by firebug as well.25422

I can set the text config to
<span style="padding-left:18px">Upload</span>, and that will correctly offset the text from the icon, but the button rendering still does not work correctly.

rborg
8 Nov 2011, 4:57 PM
I also had the problem in 3.4 with the button width only being set to the icon size. I had to override the FileUploadField redner method and change x-btn-icon to x-btn-text-icon.



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

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.createFileInput();

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' : '') // CHANGE THIS LINE TO:
cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-text-icon' : '') // CHANGE THIS LINE TO:
}));

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

this.bindListeners();
this.resizeEl = this.positionEl = this.wrap;
}
});