ExtJS 4.2 "filefield" Choose File button UI rendering weirdly

Question

I want a simple Extjs Document upload panel. I used this example available on Sencha Docs. I was expecting something like this

But when I implement the same example as it is, my panel is displayed like this (save image is due to something I was trying).

Issue is with Choose file button. I know that sencha example is using some kind of CSS but I am trying to put Image as back grounds via css but that is not helping as well(If I set "icon" property in Button config, even then the button remain the same size).

This is my code

{
    xtype: 'form',
    padding: '5 5 5 5',
    flex: 1,
    frame: false,
    border: false,
    title: 'File Upload Form',
    bodyPadding: '50 10 0',

    defaults: {
        anchor: '100%',
        allowBlank: false,
        msgTarget: 'side',
        labelWidth: 50
    },

    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    },{
        xtype: 'filefield',
        id: 'form-file',
        emptyText: 'Select an image',
        fieldLabel: 'Photo',
        name: 'photo-path',
        buttonText: '',
        buttonConfig: {
            iconCls: "background:url(http://simonwai.com/images/save_icon.gif) no-repeat !important; border:none;"
            //icon: "http://simonwai.com/images/save_icon.gif",
        }
    }],

     buttons: [{
        //text: 'Save',
        icon: "http://simonwai.com/images/save_icon.gif",
        handler: function(){
            /*var form = this.up('form').getForm();
            if(form.isValid()){
                form.submit({
                    url: 'file-upload.php',
                    waitMsg: 'Uploading your photo...',
                    success: function(fp, o) {
                        msg('Success', tpl.apply(o.result));
                    }
                });
            }*/
        }
    },{
        text: 'Reset',
        handler: function() {
            //this.up('form').getForm().reset();
        }
    }]
    }

kindly help.

Answer 1

as you can see in the fiddle your code is correct for ExtJS 4.2.

What you should do is to use styles from one of the Sencha provided themes or to extend one of them.