| 1 | <html> |
|---|
| 2 | <head> |
|---|
| 3 | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> |
|---|
| 4 | <title>File Upload Field Example</title> |
|---|
| 5 | <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> |
|---|
| 6 | <script type="text/javascript" src="../../adapter/ext/ext-base.js"> </script> |
|---|
| 7 | <script type="text/javascript" src="../../ext-all-debug.js"> </script> |
|---|
| 8 | |
|---|
| 9 | <link rel="stylesheet" type="text/css" href="file-upload.css"/> |
|---|
| 10 | <script type="text/javascript" src="FileUploadField.js"></script> |
|---|
| 11 | <script type="text/javascript" src="file-upload.js"></script> |
|---|
| 12 | |
|---|
| 13 | <link rel="stylesheet" type="text/css" href="../shared/examples.css" /> |
|---|
| 14 | <style> |
|---|
| 15 | .upload-icon { |
|---|
| 16 | background: url('../shared/icons/fam/image_add.png') no-repeat 0 0 !important; |
|---|
| 17 | } |
|---|
| 18 | #fi-button-msg { |
|---|
| 19 | border: 2px solid #ccc; |
|---|
| 20 | padding: 5px 10px; |
|---|
| 21 | background: #eee; |
|---|
| 22 | margin: 5px; |
|---|
| 23 | float: left; |
|---|
| 24 | } |
|---|
| 25 | </style> |
|---|
| 26 | </head> |
|---|
| 27 | <body> |
|---|
| 28 | <h1>File Upload Field</h1> |
|---|
| 29 | <p>The example js is not minified so it is readable. See <a href="file-upload.js">file-upload.js</a>. <a href='FileUploadField.js'>FileUploadField.js</a> is the custom extension used to create the file upload field.</p> |
|---|
| 30 | |
|---|
| 31 | |
|---|
| 32 | <p> |
|---|
| 33 | <b>Basic FileUpload</b><br /> |
|---|
| 34 | A typical file upload field with Ext style. Direct editing of the text field cannot be done in a |
|---|
| 35 | consistent, cross-browser way, so it is always read-only in this implementation. |
|---|
| 36 | <div id="fi-basic"></div> |
|---|
| 37 | <div id="fi-basic-btn"></div> |
|---|
| 38 | </p> |
|---|
| 39 | |
|---|
| 40 | <p> |
|---|
| 41 | <b>Basic FileUpload (Button-only)</b><br /> |
|---|
| 42 | You can also render the file input as a button without the text field, with access to the field's value via the |
|---|
| 43 | standard <tt>Ext.form.TextField</tt> interface or by handling the <tt>fileselected</tt> event (as in this example). |
|---|
| 44 | <div id="fi-button"></div> |
|---|
| 45 | <div id="fi-button-msg" style="display:none;"></div> |
|---|
| 46 | <div class="x-clear"></div> |
|---|
| 47 | </p> |
|---|
| 48 | |
|---|
| 49 | <p> |
|---|
| 50 | <b>Form Example</b><br /> |
|---|
| 51 | The FileUploadField can also be used in standard form layouts, with support for anchoring, validation (the |
|---|
| 52 | field is required in this example), empty text, etc. This example also demonstrates using the |
|---|
| 53 | <tt>buttonCfg</tt> option to provide a customized icon upload button. |
|---|
| 54 | <div id="fi-form"></div> |
|---|
| 55 | </p> |
|---|
| 56 | </body> |
|---|
| 57 | </html> |
|---|
