4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
15 Roo.onReady(function(){
19 // turn on validation errors beside the field globally
20 Roo.form.Field.prototype.msgTarget = 'side';
23 * ================ Simple form =======================
25 simple = new Roo.form.Form({
26 labelWidth: 75, // label settings here cascade unless overridden
30 new Roo.form.TextField({
31 fieldLabel: 'First Name',
37 new Roo.form.TextField({
38 fieldLabel: 'Last Name',
43 new Roo.form.TextField({
44 fieldLabel: 'Company',
48 new Roo.form.TextField({
49 fieldLabel: 'Password',
51 inputType: 'password',
55 new Roo.form.TextField({
61 new Roo.form.DayPicker({
62 fieldLabel: 'Pick a day',
68 simple.addButton('Save');
69 simple.addButton('Cancel');
71 simple.render('form-ct');
75 * ================ Form 2 =======================
77 mform = new Roo.form.Form({
84 width: 500, // precise column sizes or percentages or straight CSS
87 xtype : 'ComboBoxArray',
89 fieldLabel: 'Multi select test',
91 hiddenName: 'country',
97 displayField : 'state',
99 name : 'countryNames',
100 hiddenName : 'country',
105 xtype : 'SimpleStore',
107 fields: ['abbr', 'state'],
108 data : Roo.exampledata.states // from states.js
116 triggerAction: 'all',
117 emptyText:'Select a state...',
132 width: 500, // precise column sizes or percentages or straight CSS
135 xtype : 'ComboBoxArray',
137 fieldLabel: 'Multi select test',
140 name: 'countrylist_names',
141 hiddenName: 'countrylist',
147 displayField : 'title',
149 // thes are not really needed as parent overwrites them!?
150 name : 'country_name',
151 hiddenName : 'country',
166 xtype : 'ScriptTagProxy',
167 url: 'http://www.roojs.com/forum/topics-remote.php'
171 xtype : 'JsonReader',
173 totalProperty: 'totalCount',
176 {name: 'title', mapping: 'topic_title'},
177 {name: 'topicId', mapping: 'topic_id'},
178 {name: 'author', mapping: 'author'},
179 {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
180 {name: 'excerpt', mapping: 'post_text'}
190 triggerAction: 'all',
191 emptyText:'Select a state...',
210 width: 272, // precise column sizes or percentages or straight CSS
214 fieldLabel: 'First Name',
220 fieldLabel: 'Company',
230 style:'margin-left:10px',
235 fieldLabel: 'Last Name',
255 xtype : 'HtmlEditor',
257 fieldLabel:'Biography',
260 resizable: 's', /// where the handles should got..
261 toolbars : [ 'ToolbarStandard', 'ToolbarContext' ]
268 mform.addButton('Save');
269 mform.addButton('Cancel');
272 mform.render('form-ct2');
275 countryNames : 'Alaska,Louisana',
276 countrylist : 'AG,AZ',
277 countrylist_names : 'Antigua and Barbuda,Azerbaijan'
280 * ================ Form 3 =======================
282 var fs = new Roo.form.Form({
288 {legend:'Contact Information', style: 'width:320px;' },
289 new Roo.form.TextField({
290 fieldLabel: 'First Name',
295 new Roo.form.TextField({
296 fieldLabel: 'Last Name',
301 new Roo.form.TextField({
302 fieldLabel: 'Company',
307 new Roo.form.TextField({
314 new Roo.form.ComboBox({
317 store: new Roo.data.SimpleStore({
318 fields: ['abbr', 'state'],
319 data : Roo.exampledata.states // from states.js
321 displayField:'state',
324 triggerAction: 'all',
325 emptyText:'Select a state...',
330 new Roo.form.DateField({
331 fieldLabel: 'Date of Birth',
336 new Roo.form.MonthField({
337 fieldLabel: 'Date of Month',
344 fs.addButton('Save');
345 fs.addButton('Cancel');
347 fs.render('form-ct3');
350 * ================ Form 4 =======================
352 var form = new Roo.form.Form({
357 form.column({width:342, labelWidth:75}); // open column, without auto close
359 {legend:'Contact Information'},
360 new Roo.form.TextField({
361 fieldLabel: 'Full Name',
367 new Roo.form.TextField({
368 fieldLabel: 'Job Title',
373 new Roo.form.TextField({
374 fieldLabel: 'Company',
379 new Roo.form.TextArea({
380 fieldLabel: 'Address',
383 preventScrollbars:true,
384 value: '123 example drive'
388 {legend:'Phone Numbers'},
389 new Roo.form.TextField({
392 value: '(123) 456 789'
395 new Roo.form.TextField({
396 fieldLabel: 'Business',
400 new Roo.form.TextField({
401 fieldLabel: 'Mobile',
405 new Roo.form.TextField({
410 form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
414 {width:202, style:'margin-left:10px', clear:true}
418 {id:'photo', legend:'Photo'}
423 {legend:'Options', hideLabels:true},
424 new Roo.form.Checkbox({
425 boxLabel:'RooJS v1.1.1',
429 new Roo.form.Checkbox({
430 boxLabel:'RooJS v2.0.0',
434 new Roo.form.Checkbox({
435 boxLabel:'RooScript',
442 form.end(); // close the column
445 form.applyIfToFields({
449 form.addButton('Save');
450 form.addButton('Cancel');
452 form.render('form-ct4');
454 // The form elements are standard HTML elements. By assigning an id (as we did above)
455 // we can manipulate them like any other element
456 var photo = Roo.get('photo');
457 var c = photo.createChild({
461 src: 'roojs_icon.jpg',
462 style:'margin-bottom:5px;'
469 form5 = new Roo.form.Form({
477 fieldLabel: 'A checkbox',
478 boxLabel:'RooJS v1.1.1',
485 xtype : 'DisplayField',
488 fieldLabel: 'Simple',
489 value : 'example text'
497 xtype: 'SimpleStore',
499 fields: ['abbr', 'state'],
500 data : Roo.exampledata.states // from states.js
502 displayField:'state',
505 triggerAction: 'all',
506 emptyText:'Select a state...',
512 Roo.MessageBox.alert("Alert", "Add Pressed");
516 Roo.MessageBox.alert("Alert", "Edit Pressed");
525 form5.render('form-ct5');
528 // form6 = new Roo.form.Form({
529 // labelAlign: 'left',
534 // xtype: 'TimePicker',
536 // fieldLabel: 'test time picker',
540 // xtype: 'DateDisplay',
542 // fieldLabel: 'test date picker',
550 // form6.render('form-ct6');
555 * ================ form 7 =======================
557 var form7 = new Roo.form.Form({
558 labelWidth: 75, // label settings here cascade unless overridden
562 new Roo.form.Signature({
563 fieldLabel: 'Signature',
569 // form7.addButton('Save');
570 // form7.addButton('Cancel');
572 form7.render('form-ct7');