3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.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',
321 By turning off deferred rendering we are guaranteeing that the
322 form fields within tabs that are not activated will still be rendered.
323 This is often important when creating multi-tabbed forms.
325 deferredRender: false,
326 defaults:{bodyStyle:'padding:10px'},
328 title:'Personal Details',
330 defaults: {width: 230},
331 defaultType: 'textfield',
334 fieldLabel: 'First Name',
339 fieldLabel: 'Last Name',
343 fieldLabel: 'Company',
352 title:'Phone Numbers',
354 defaults: {width: 230},
355 defaultType: 'textfield',
360 value: '(888) 555-1212'
362 fieldLabel: 'Business',
365 fieldLabel: 'Mobile',
378 fieldLabel:'Biography'
390 tab2.render(document.body);