CODEWITHSUNDEEP
extjsextjs4extjs4.2sencha-cmdfilefield
Abdul Rehman Yawar Khan
Abdul Rehman Yawar Khan

Reputation: 1087

ExtJS 4.2 "filefield" Choose File button UI rendering weirdly

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.

Upvotes: 1

Views: 2395

Answers (2)

neongrau
neongrau

Reputation: 953

though this question is a bit old...

I came here having the same issue. After running "sencha app build" the file control was rendered properly. Guess the build process needed to add some styles that weren't available in the development mode before a fresh app build that had the file control in its requires.

Upvotes: 0

Federico Baron
Federico Baron

Reputation: 997

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.

Upvotes: 1

Related Questions