examples/form/file-upload.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7
   8 Ext.onReady(function(){
   9
  10     Ext.QuickTips.init();
  11
  12     var msg = function(title, msg){
  13         Ext.Msg.show({
  14             title: title,
  15             msg: msg,
  16             minWidth: 200,
  17             modal: true,
  18             icon: Ext.Msg.INFO,
  19             buttons: Ext.Msg.OK
  20         });
  21     };
  22
  23     var fibasic = new Ext.ux.form.FileUploadField({
  24         renderTo: 'fi-basic',
  25         width: 400
  26     });
  27
  28     new Ext.Button({
  29         text: 'Get File Path',
  30         renderTo: 'fi-basic-btn',
  31         handler: function(){
  32             var v = fibasic.getValue();
  33             msg('Selected File', v && v != '' ? v : 'None');
  34         }
  35     });
  36
  37     var fbutton = new Ext.ux.form.FileUploadField({
  38         renderTo: 'fi-button',
  39         buttonOnly: true,
  40         listeners: {
  41             'fileselected': function(fb, v){
  42                 var el = Ext.fly('fi-button-msg');
  43                 el.update('<b>Selected:</b> '+v);
  44                 if(!el.isVisible()){
  45                     el.slideIn('t', {
  46                         duration: .2,
  47                         easing: 'easeIn',
  48                         callback: function(){
  49                             el.highlight();
  50                         }
  51                     });
  52                 }else{
  53                     el.highlight();
  54                 }
  55             }
  56         }
  57     });
  58
  59     var fp = new Ext.FormPanel({
  60         renderTo: 'fi-form',
  61         fileUpload: true,
  62         width: 500,
  63         frame: true,
  64         title: 'File Upload Form',
  65         autoHeight: true,
  66         bodyStyle: 'padding: 10px 10px 0 10px;',
  67         labelWidth: 50,
  68         defaults: {
  69             anchor: '95%',
  70             allowBlank: false,
  71             msgTarget: 'side'
  72         },
  73         items: [{
  74             xtype: 'textfield',
  75             fieldLabel: 'Name'
  76         },{
  77             xtype: 'fileuploadfield',
  78             id: 'form-file',
  79             emptyText: 'Select an image',
  80             fieldLabel: 'Photo',
  81             name: 'photo-path',
  82             buttonText: '',
  83             buttonCfg: {
  84                 iconCls: 'upload-icon'
  85             }
  86         }],
  87         buttons: [{
  88             text: 'Save',
  89             handler: function(){
  90                 if(fp.getForm().isValid()){
  91                         fp.getForm().submit({
  92                             url: 'file-upload.php',
  93                             waitMsg: 'Uploading your photo...',
  94                             success: function(fp, o){
  95                                 msg('Success', 'Processed file "'+o.result.file+'" on the server');
  96                             }
  97                         });
  98                 }
  99             }
 100         },{
 101             text: 'Reset',
 102             handler: function(){
 103                 fp.getForm().reset();
 104             }
 105         }]
 106     });
 107
 108 });