Ext.onReady(function(){

   
Ext.QuickTips.init();

   
var msg = function(title, msg){
       
Ext.Msg.show({
            title
: title,
            msg
: msg,
            minWidth
: 200,
            modal
: true,
            icon
: Ext.Msg.INFO,
            buttons
: Ext.Msg.OK
       
});
   
};

   
var fibasic = new Ext.ux.form.FileUploadField({
        renderTo
: 'fi-basic',
        width
: 400
   
});

   
new Ext.Button({
        text
: 'Get File Path',
        renderTo
: 'fi-basic-btn',
        handler
: function(){
           
var v = fibasic.getValue();
            msg
('Selected File', v && v != '' ? v : 'None');
       
}
   
});

   
var fbutton = new Ext.ux.form.FileUploadField({
        renderTo
: 'fi-button',
        buttonOnly
: true,
        listeners
: {
           
'fileselected': function(fb, v){
               
var el = Ext.fly('fi-button-msg');
                el
.update('Selected: '+v);
               
if(!el.isVisible()){
                    el
.slideIn('t', {
                        duration
: .2,
                        easing
: 'easeIn',
                        callback
: function(){
                            el
.highlight();
                       
}
                   
});
               
}else{
                    el
.highlight();
               
}
           
}
       
}
   
});

   
var fp = new Ext.FormPanel({
        renderTo
: 'fi-form',
        fileUpload
: true,
        width
: 500,
        frame
: true,
        title
: 'File Upload Form',
        autoHeight
: true,
        bodyStyle
: 'padding: 10px 10px 0 10px;',
        labelWidth
: 50,
        defaults
: {
            anchor
: '95%',
            allowBlank
: false,
            msgTarget
: 'side'
       
},
        items
: [{
            xtype
: 'textfield',
            fieldLabel
: 'Name'
       
},{
            xtype
: 'fileuploadfield',
            id
: 'form-file',
            emptyText
: 'Select an image',
            fieldLabel
: 'Photo',
            name
: 'photo-path',
            buttonText
: '',
            buttonCfg
: {
                iconCls
: 'upload-icon'
           
}
       
}],
        buttons
: [{
            text
: 'Save',
            handler
: function(){
               
if(fp.getForm().isValid()){
                        fp
.getForm().submit({
                            url
: 'file-upload.php',
                            waitMsg
: 'Uploading your photo...',
                            success
: function(fp, o){
                                msg
('Success', 'Processed file "'+o.result.file+'" on the server');
                           
}
                       
});
               
}
           
}
       
},{
            text
: 'Reset',
            handler
: function(){
                fp
.getForm().reset();
           
}
       
}]
   
});

});