Upgrade to ExtJS 3.0.0 - Released 07/06/2009

[extjs.git] / docs / source / file-upload.html
diff --git a/docs/source/file-upload.html b/docs/source/file-upload.html

new file mode 100644 (file)

index 0000000..76a2ed1
--- /dev/null
+++ b/docs/source/file-upload.html
@@ -0,0 +1,111 @@
+<html>\r
+<head>\r
+  <title>The source code</title>\r
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body  onload="prettyPrint();">\r
+    <pre class="prettyprint lang-js">
+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('<b>Selected:</b> '+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();
+            }
+        }]
+    });
+
+});</pre>    \r
+</body>\r
+</html>
+\ No newline at end of file