]>
Commit | Line | Data |
---|---|---|
947f0963 TL |
1 | /** |
2 | * This example demonstrates use of Ext.form.field.File, a file upload field with custom | |
3 | * rendering, and error handling. | |
4 | */ | |
5 | Ext.define('KitchenSink.view.form.FileUploads', { | |
6 | extend: 'Ext.container.Container', | |
7 | xtype: 'form-fileuploads', | |
8 | controller: 'form-fileuploads', | |
9 | ||
10 | //<example> | |
11 | requires: [ | |
12 | 'KitchenSink.view.form.FileUploadsController' | |
13 | ], | |
14 | ||
15 | exampleTitle: 'File Upload fields', | |
16 | otherContent: [{ | |
17 | type: 'Controller', | |
18 | path: 'classic/samples/view/form/FileUploadsController.js' | |
19 | }], | |
20 | //</example> | |
21 | ||
22 | profiles: { | |
23 | classic: { | |
24 | labelWidth: 70 | |
25 | }, | |
26 | neptune: { | |
27 | labelWidth: 70 | |
28 | }, | |
29 | graphite: { | |
30 | labelWidth: 120 | |
31 | }, | |
32 | 'classic-material': { | |
33 | labelWidth: 120 | |
34 | } | |
35 | }, | |
36 | width: 600, | |
37 | layout: { | |
38 | type: 'vbox', | |
39 | align: 'stretch' | |
40 | }, | |
41 | ||
42 | defaults: { | |
43 | xtype: 'form', | |
44 | layout: 'anchor', | |
45 | ||
46 | bodyPadding: 10, | |
47 | style: { | |
48 | 'margin-bottom': '20px' | |
49 | }, | |
50 | ||
51 | defaults: { | |
52 | anchor: '100%' | |
53 | } | |
54 | }, | |
55 | ||
56 | items: [{ | |
57 | items: [{ | |
58 | xtype: 'component', | |
59 | html: [ | |
60 | '<h3>Basic File Field</h3>', | |
61 | '<p>A typical file upload field with Ext style. Direct editing ', | |
62 | 'of the text field cannot be done in a consistent, cross-browser way, ', | |
63 | 'so it is always read-only. The file path reported by the ', | |
64 | '<code>getValue</code> method will depend on the browser and cannot ', | |
65 | 'be controlled by Ext JS.' | |
66 | ] | |
67 | }, { | |
68 | xtype: 'filefield', | |
69 | hideLabel: true, | |
70 | reference: 'basicFile' | |
71 | }, { | |
72 | xtype: 'button', | |
73 | text: 'Get File Path', | |
74 | handler: 'getFilePath' | |
75 | }] | |
76 | }, { | |
77 | items: [{ | |
78 | xtype: 'component', | |
79 | html: [ | |
80 | '<h3>Button Only</h3>', | |
81 | '<p>You can also render the file input as a button without ', | |
82 | 'the text field, with access to the field\'s value via the ', | |
83 | 'standard <tt>Ext.form.field.Field</tt> interface or by handling ', | |
84 | 'the <tt>change</tt> event (as in this example).', | |
85 | '</p>' | |
86 | ] | |
87 | }, { | |
88 | xtype: 'fileuploadfield', // Same as filefield above | |
89 | buttonOnly: true, | |
90 | hideLabel: true, | |
91 | listeners: { | |
92 | change: 'buttonOnlyChange' | |
93 | } | |
94 | }] | |
95 | }, { | |
96 | title: 'File Upload Form', | |
97 | frame: true, | |
98 | bodyPadding: '10 10 0', | |
99 | reference: 'firstForm', | |
100 | ||
101 | defaults: { | |
102 | anchor: '100%', | |
103 | allowBlank: false, | |
104 | msgTarget: 'side', | |
105 | labelWidth: 60 | |
106 | }, | |
107 | ||
108 | items: [{ | |
109 | xtype: 'textfield', | |
110 | fieldLabel: 'Name' | |
111 | }, { | |
112 | xtype: 'filefield', | |
113 | emptyText: 'Select an image', | |
114 | fieldLabel: 'Photo', | |
115 | name: 'photo-path', | |
116 | buttonText: '', | |
117 | buttonConfig: { | |
118 | iconCls: 'file-uploads-image-add' | |
119 | } | |
120 | }], | |
121 | ||
122 | buttons: [{ | |
123 | text: 'Save', | |
124 | handler: 'firstFormSave' | |
125 | }, { | |
126 | text: 'Reset', | |
127 | handler: 'firstFormReset' | |
128 | }] | |
129 | }, { | |
130 | title: 'Upload error test', | |
131 | frame: true, | |
132 | bodyPadding: '10 10 0', | |
133 | reference: 'secondForm', | |
134 | ||
135 | defaults: { | |
136 | anchor: '100%', | |
137 | allowBlank: false, | |
138 | msgTarget: 'side', | |
139 | labelWidth: '${labelWidth}' | |
140 | }, | |
141 | ||
142 | items: [{ | |
143 | xtype: 'textfield', | |
144 | fieldLabel: 'Name' | |
145 | }, { | |
146 | xtype: 'filefield', | |
147 | emptyText: 'Select an image', | |
148 | fieldLabel: 'Photo', | |
149 | name: 'photo-path', | |
150 | buttonConfig: { | |
151 | text: '', | |
152 | iconCls: 'file-uploads-image-add' | |
153 | } | |
154 | }, { | |
155 | xtype: 'numberfield', | |
156 | fieldLabel: 'HTTP status', | |
157 | value: 200, | |
158 | minValue: 200, | |
159 | maxValue: 599, | |
160 | name: 'returnResponse' | |
161 | }], | |
162 | ||
163 | buttons: [{ | |
164 | text: 'Save', | |
165 | handler: 'secondFormSubmit' | |
166 | }, { | |
167 | text: 'Reset', | |
168 | handler: 'secondFormReset' | |
169 | }] | |
170 | }] | |
171 | }); |