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