source: trunk/web/addons/job_monarch/lib/extjs-30/examples/form/dynamic.js @ 625

Last change on this file since 625 was 625, checked in by ramonb, 15 years ago

lib/extjs-30:

  • new ExtJS 3.0
File size: 10.3 KB
Line 
1/*!
2 * Ext JS Library 3.0.0
3 * Copyright(c) 2006-2009 Ext JS, LLC
4 * licensing@extjs.com
5 * http://www.extjs.com/license
6 */
7Ext.onReady(function(){
8
9    Ext.QuickTips.init();
10
11    // turn on validation errors beside the field globally
12    Ext.form.Field.prototype.msgTarget = 'side';
13
14    var bd = Ext.getBody();
15
16    /*
17     * ================  Simple form  =======================
18     */
19    bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
20
21
22    var simple = new Ext.FormPanel({
23        labelWidth: 75, // label settings here cascade unless overridden
24        url:'save-form.php',
25        frame:true,
26        title: 'Simple Form',
27        bodyStyle:'padding:5px 5px 0',
28        width: 350,
29        defaults: {width: 230},
30        defaultType: 'textfield',
31
32        items: [{
33                fieldLabel: 'First Name',
34                name: 'first',
35                allowBlank:false
36            },{
37                fieldLabel: 'Last Name',
38                name: 'last'
39            },{
40                fieldLabel: 'Company',
41                name: 'company'
42            }, {
43                fieldLabel: 'Email',
44                name: 'email',
45                vtype:'email'
46            }, new Ext.form.TimeField({
47                fieldLabel: 'Time',
48                name: 'time',
49                minValue: '8:00am',
50                maxValue: '6:00pm'
51            })
52        ],
53
54        buttons: [{
55            text: 'Save'
56        },{
57            text: 'Cancel'
58        }]
59    });
60
61    simple.render(document.body);
62
63   
64    /*
65     * ================  Form 2  =======================
66     */
67    bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});
68
69    var fsf = new Ext.FormPanel({
70        labelWidth: 75, // label settings here cascade unless overridden
71        url:'save-form.php',
72        frame:true,
73        title: 'Simple Form with FieldSets',
74        bodyStyle:'padding:5px 5px 0',
75        width: 350,
76
77        items: [{
78            xtype:'fieldset',
79            checkboxToggle:true,
80            title: 'User Information',
81            autoHeight:true,
82            defaults: {width: 210},
83            defaultType: 'textfield',
84            collapsed: true,
85            items :[{
86                    fieldLabel: 'First Name',
87                    name: 'first',
88                    allowBlank:false
89                },{
90                    fieldLabel: 'Last Name',
91                    name: 'last'
92                },{
93                    fieldLabel: 'Company',
94                    name: 'company'
95                }, {
96                    fieldLabel: 'Email',
97                    name: 'email',
98                    vtype:'email'
99                }
100            ]
101        },{
102            xtype:'fieldset',
103            title: 'Phone Number',
104            collapsible: true,
105            autoHeight:true,
106            defaults: {width: 210},
107            defaultType: 'textfield',
108            items :[{
109                    fieldLabel: 'Home',
110                    name: 'home',
111                    value: '(888) 555-1212'
112                },{
113                    fieldLabel: 'Business',
114                    name: 'business'
115                },{
116                    fieldLabel: 'Mobile',
117                    name: 'mobile'
118                },{
119                    fieldLabel: 'Fax',
120                    name: 'fax'
121                }
122            ]
123        }],
124
125        buttons: [{
126            text: 'Save'
127        },{
128            text: 'Cancel'
129        }]
130    });
131
132    fsf.render(document.body);
133
134    /*
135     * ================  Form 3  =======================
136     */
137    bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});
138
139
140    var top = new Ext.FormPanel({
141        labelAlign: 'top',
142        frame:true,
143        title: 'Multi Column, Nested Layouts and Anchoring',
144        bodyStyle:'padding:5px 5px 0',
145        width: 600,
146        items: [{
147            layout:'column',
148            items:[{
149                columnWidth:.5,
150                layout: 'form',
151                items: [{
152                    xtype:'textfield',
153                    fieldLabel: 'First Name',
154                    name: 'first',
155                    anchor:'95%'
156                }, {
157                    xtype:'textfield',
158                    fieldLabel: 'Company',
159                    name: 'company',
160                    anchor:'95%'
161                }]
162            },{
163                columnWidth:.5,
164                layout: 'form',
165                items: [{
166                    xtype:'textfield',
167                    fieldLabel: 'Last Name',
168                    name: 'last',
169                    anchor:'95%'
170                },{
171                    xtype:'textfield',
172                    fieldLabel: 'Email',
173                    name: 'email',
174                    vtype:'email',
175                    anchor:'95%'
176                }]
177            }]
178        },{
179            xtype:'htmleditor',
180            id:'bio',
181            fieldLabel:'Biography',
182            height:200,
183            anchor:'98%'
184        }],
185
186        buttons: [{
187            text: 'Save'
188        },{
189            text: 'Cancel'
190        }]
191    });
192
193    top.render(document.body);
194
195
196    /*
197     * ================  Form 4  =======================
198     */
199    bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});
200
201
202
203    var tabs = new Ext.FormPanel({
204        labelWidth: 75,
205        border:false,
206        width: 350,
207
208        items: {
209            xtype:'tabpanel',
210            activeTab: 0,
211            defaults:{autoHeight:true, bodyStyle:'padding:10px'}, 
212            items:[{
213                title:'Personal Details',
214                layout:'form',
215                defaults: {width: 230},
216                defaultType: 'textfield',
217
218                items: [{
219                    fieldLabel: 'First Name',
220                    name: 'first',
221                    allowBlank:false,
222                    value: 'Jack'
223                },{
224                    fieldLabel: 'Last Name',
225                    name: 'last',
226                    value: 'Slocum'
227                },{
228                    fieldLabel: 'Company',
229                    name: 'company',
230                    value: 'Ext JS'
231                }, {
232                    fieldLabel: 'Email',
233                    name: 'email',
234                    vtype:'email'
235                }]
236            },{
237                title:'Phone Numbers',
238                layout:'form',
239                defaults: {width: 230},
240                defaultType: 'textfield',
241
242                items: [{
243                    fieldLabel: 'Home',
244                    name: 'home',
245                    value: '(888) 555-1212'
246                },{
247                    fieldLabel: 'Business',
248                    name: 'business'
249                },{
250                    fieldLabel: 'Mobile',
251                    name: 'mobile'
252                },{
253                    fieldLabel: 'Fax',
254                    name: 'fax'
255                }]
256            }]
257        },
258
259        buttons: [{
260            text: 'Save'
261        },{
262            text: 'Cancel'
263        }]
264    });
265
266    tabs.render(document.body);
267
268
269
270    /*
271     * ================  Form 5  =======================
272     */
273    bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});
274
275    var tab2 = new Ext.FormPanel({
276        labelAlign: 'top',
277        title: 'Inner Tabs',
278        bodyStyle:'padding:5px',
279        width: 600,
280        items: [{
281            layout:'column',
282            border:false,
283            items:[{
284                columnWidth:.5,
285                layout: 'form',
286                border:false,
287                items: [{
288                    xtype:'textfield',
289                    fieldLabel: 'First Name',
290                    name: 'first',
291                    anchor:'95%'
292                }, {
293                    xtype:'textfield',
294                    fieldLabel: 'Company',
295                    name: 'company',
296                    anchor:'95%'
297                }]
298            },{
299                columnWidth:.5,
300                layout: 'form',
301                border:false,
302                items: [{
303                    xtype:'textfield',
304                    fieldLabel: 'Last Name',
305                    name: 'last',
306                    anchor:'95%'
307                },{
308                    xtype:'textfield',
309                    fieldLabel: 'Email',
310                    name: 'email',
311                    vtype:'email',
312                    anchor:'95%'
313                }]
314            }]
315        },{
316            xtype:'tabpanel',
317            plain:true,
318            activeTab: 0,
319            height:235,
320            defaults:{bodyStyle:'padding:10px'},
321            items:[{
322                title:'Personal Details',
323                layout:'form',
324                defaults: {width: 230},
325                defaultType: 'textfield',
326
327                items: [{
328                    fieldLabel: 'First Name',
329                    name: 'first',
330                    allowBlank:false,
331                    value: 'Jack'
332                },{
333                    fieldLabel: 'Last Name',
334                    name: 'last',
335                    value: 'Slocum'
336                },{
337                    fieldLabel: 'Company',
338                    name: 'company',
339                    value: 'Ext JS'
340                }, {
341                    fieldLabel: 'Email',
342                    name: 'email',
343                    vtype:'email'
344                }]
345            },{
346                title:'Phone Numbers',
347                layout:'form',
348                defaults: {width: 230},
349                defaultType: 'textfield',
350
351                items: [{
352                    fieldLabel: 'Home',
353                    name: 'home',
354                    value: '(888) 555-1212'
355                },{
356                    fieldLabel: 'Business',
357                    name: 'business'
358                },{
359                    fieldLabel: 'Mobile',
360                    name: 'mobile'
361                },{
362                    fieldLabel: 'Fax',
363                    name: 'fax'
364                }]
365            },{
366                cls:'x-plain',
367                title:'Biography',
368                layout:'fit',
369                items: {
370                    xtype:'htmleditor',
371                    id:'bio2',
372                    fieldLabel:'Biography'
373                }
374            }]
375        }],
376
377        buttons: [{
378            text: 'Save'
379        },{
380            text: 'Cancel'
381        }]
382    });
383
384    tab2.render(document.body);
385});
Note: See TracBrowser for help on using the repository browser.