| 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 |
|
| 6 |
<!-- ** CSS ** -->
|
| 7 |
<!-- base library -->
|
| 8 |
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" />
|
| 9 |
<link rel="stylesheet" type="text/css" href="fileuploadfield.css" />
|
| 10 |
|
| 11 |
<!-- overrides to base library -->
|
| 12 |
|
| 13 |
<!-- page specific -->
|
| 14 |
<link rel="stylesheet" type="text/css" href="/ext/shared/examples.css" />
|
| 15 |
<!-- <link rel="stylesheet" type="text/css" href="/ext/ux/fileuploadfield/css/fileuploadfield.css"/>-->
|
| 16 |
|
| 17 |
<style type=text/css>
|
| 18 |
.upload-icon {
|
| 19 |
background: url('../shared/icons/fam/image_add.png') no-repeat 0 0 !important;
|
| 20 |
}
|
| 21 |
#fi-button-msg {
|
| 22 |
border: 2px solid #ccc;
|
| 23 |
padding: 5px 10px;
|
| 24 |
background: #eee;
|
| 25 |
margin: 5px;
|
| 26 |
float: left;
|
| 27 |
}
|
| 28 |
</style>
|
| 29 |
|
| 30 |
<!-- ** Javascript ** -->
|
| 31 |
<!-- ExtJS library: base/adapter -->
|
| 32 |
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
|
| 33 |
|
| 34 |
<!-- ExtJS library: all widgets -->
|
| 35 |
<script type="text/javascript" src="/ext/ext-all.js"></script>
|
| 36 |
|
| 37 |
<!-- overrides to base library -->
|
| 38 |
<script type="text/javascript" src="fileUploader.js"></script>
|
| 39 |
|
| 40 |
<!-- page specific -->
|
| 41 |
<script type="text/javascript" src="file-upload.js"></script>
|
| 42 |
|
| 43 |
</head>
|
| 44 |
<body>
|
| 45 |
<h1>File Upload Field</h1>
|
| 46 |
<p>This example utilizes a custom extension to implement a file upload field.
|
| 47 |
The js is not minified so it is readable. See <a href="file-upload.js">file-input.js</a> and
|
| 48 |
<a href="../ux/fileuploadfield/FileUploadField.js">FileUploadField.js</a>.</p>
|
| 49 |
|
| 50 |
<p>
|
| 51 |
|
| 52 |
<b>Basic FileUpload</b><br />
|
| 53 |
A typical file upload field with Ext style. Direct editing of the text field cannot be done in a
|
| 54 |
consistent, cross-browser way, so it is always read-only in this implementation.
|
| 55 |
<div id="fi-basic"></div>
|
| 56 |
<div id="fi-basic-btn"></div>
|
| 57 |
</p>
|
| 58 |
|
| 59 |
<p>
|
| 60 |
<b>Basic FileUpload (Button-only)</b><br />
|
| 61 |
You can also render the file input as a button without the text field, with access to the field's value via the
|
| 62 |
standard <tt>Ext.form.TextField</tt> interface or by handling the <tt>fileselected</tt> event (as in this example).
|
| 63 |
<div id="fi-button"></div>
|
| 64 |
|
| 65 |
<div id="fi-button-msg" style="display:none;"></div>
|
| 66 |
<div class="x-clear"></div>
|
| 67 |
</p>
|
| 68 |
|
| 69 |
<p>
|
| 70 |
<b>Form Example</b><br />
|
| 71 |
The FileUploadField can also be used in standard form layouts, with support for anchoring, validation (the
|
| 72 |
field is required in this example), empty text, etc. This example also demonstrates using the
|
| 73 |
<tt>buttonCfg</tt> option to provide a customized icon upload button.
|
| 74 |
<div id="fi-form"></div>
|
| 75 |
|
| 76 |
</p>
|
| 77 |
</body>
|
| 78 |
</html>
|
