3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
7 Ext.onReady(function(){
11 // turn on validation errors beside the field globally
12 Ext.form.Field.prototype.msgTarget = 'side';
14 var bd = Ext.getBody();
17 * ================ Simple form =======================
19 bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
22 var simple = new Ext.FormPanel({
23 labelWidth: 75, // label settings here cascade unless overridden
27 bodyStyle:'padding:5px 5px 0',
29 defaults: {width: 230},
30 defaultType: 'textfield',
33 fieldLabel: 'First Name',
37 fieldLabel: 'Last Name',
40 fieldLabel: 'Company',
46 }, new Ext.form.TimeField({
61 simple.render(document.body);
65 * ================ Form 2 =======================
67 bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});
69 var fsf = new Ext.FormPanel({
70 labelWidth: 75, // label settings here cascade unless overridden
73 title: 'Simple Form with FieldSets',
74 bodyStyle:'padding:5px 5px 0',
80 title: 'User Information',
82 defaults: {width: 210},
83 defaultType: 'textfield',
86 fieldLabel: 'First Name',
90 fieldLabel: 'Last Name',
93 fieldLabel: 'Company',
103 title: 'Phone Number',
106 defaults: {width: 210},
107 defaultType: 'textfield',
111 value: '(888) 555-1212'
113 fieldLabel: 'Business',
116 fieldLabel: 'Mobile',
132 fsf.render(document.body);
135 * ================ Form 3 =======================
137 bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});
140 var top = new Ext.FormPanel({
143 title: 'Multi Column, Nested Layouts and Anchoring',
144 bodyStyle:'padding:5px 5px 0',
153 fieldLabel: 'First Name',
158 fieldLabel: 'Company',
167 fieldLabel: 'Last Name',
181 fieldLabel:'Biography',
193 top.render(document.body);
197 * ================ Form 4 =======================
199 bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});
203 var tabs = new Ext.FormPanel({
211 defaults:{autoHeight:true, bodyStyle:'padding:10px'},
213 title:'Personal Details',
215 defaults: {width: 230},
216 defaultType: 'textfield',
219 fieldLabel: 'First Name',
224 fieldLabel: 'Last Name',
228 fieldLabel: 'Company',
237 title:'Phone Numbers',
239 defaults: {width: 230},
240 defaultType: 'textfield',
245 value: '(888) 555-1212'
247 fieldLabel: 'Business',
250 fieldLabel: 'Mobile',
266 tabs.render(document.body);
271 * ================ Form 5 =======================
273 bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});
275 var tab2 = new Ext.FormPanel({
278 bodyStyle:'padding:5px',
289 fieldLabel: 'First Name',
294 fieldLabel: 'Company',
304 fieldLabel: 'Last Name',
320 defaults:{bodyStyle:'padding:10px'},
322 title:'Personal Details',
324 defaults: {width: 230},
325 defaultType: 'textfield',
328 fieldLabel: 'First Name',
333 fieldLabel: 'Last Name',
337 fieldLabel: 'Company',
346 title:'Phone Numbers',
348 defaults: {width: 230},
349 defaultType: 'textfield',
354 value: '(888) 555-1212'
356 fieldLabel: 'Business',
359 fieldLabel: 'Mobile',
372 fieldLabel:'Biography'
384 tab2.render(document.body);