File Upload Field icon issue

[legrego]

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.Attachment 25423

I have verified that all required stylesheets, etc are linked correctly. I have attached the icon class as reported by firebug as well.Attachment 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]

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;
        }
    });