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">
16 Roo.onReady(function(){
20 // turn on validation errors beside the field globally
21 Roo.form.Field.prototype.msgTarget = 'side';
24 * ================ Simple form =======================
26 simple = new Roo.form.Form({
27 labelWidth: 75, // label settings here cascade unless overridden
31 new Roo.form.TextField({
32 fieldLabel: 'First Name',
38 new Roo.form.TextField({
39 fieldLabel: 'Last Name',
46 new Roo.form.TextField({
47 fieldLabel: 'Company',
51 new Roo.form.TextField({
52 fieldLabel: 'Password',
54 inputType: 'password',
58 new Roo.form.TextField({
64 new Roo.form.DayPicker({
65 fieldLabel: 'Pick a day',
71 simple.addButton('Save');
72 simple.addButton('Cancel');
74 simple.render('form-ct');
78 * ================ Form 2 =======================
80 mform = new Roo.form.Form({
87 width: 500, // precise column sizes or percentages or straight CSS
90 xtype : 'ComboBoxArray',
92 fieldLabel: 'Multi select test',
94 hiddenName: 'country',
100 displayField : 'state',
102 name : 'countryNames',
103 hiddenName : 'country',
108 xtype : 'SimpleStore',
110 fields: ['abbr', 'state'],
111 data : Roo.exampledata.states // from states.js
119 triggerAction: 'all',
120 emptyText:'Select a state...',
135 width: 500, // precise column sizes or percentages or straight CSS
138 xtype : 'ComboBoxArray',
140 fieldLabel: 'Multi select test',
143 name: 'countrylist_names',
144 hiddenName: 'countrylist',
150 displayField : 'title',
152 // thes are not really needed as parent overwrites them!?
153 name : 'country_name',
154 hiddenName : 'country',
169 xtype : 'ScriptTagProxy',
170 url: 'http://www.roojs.com/forum/topics-remote.php'
174 xtype : 'JsonReader',
176 totalProperty: 'totalCount',
179 {name: 'title', mapping: 'topic_title'},
180 {name: 'topicId', mapping: 'topic_id'},
181 {name: 'author', mapping: 'author'},
182 {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
183 {name: 'excerpt', mapping: 'post_text'}
193 triggerAction: 'all',
194 emptyText:'Select a state...',
213 width: 272, // precise column sizes or percentages or straight CSS
217 fieldLabel: 'First Name',
223 fieldLabel: 'Company',
233 style:'margin-left:10px',
238 fieldLabel: 'Last Name',
252 fieldLabel: 'Country',
257 displayField : 'title',
258 emptyText : 'Select a country',
266 url: 'sample.data.json'
270 xtype : 'JsonReader',
272 totalProperty: 'totalCount',
292 xtype : 'HtmlEditor',
294 fieldLabel:'Biography',
297 resizable: 's', /// where the handles should got..
298 toolbars : [ 'ToolbarStandard', 'ToolbarContext' ]
305 mform.addButton('Save');
306 mform.addButton('Cancel');
309 mform.render('form-ct2');
312 countryNames : 'Alaska,Louisana',
313 countrylist : 'AG,AZ',
314 countrylist_names : 'Antigua and Barbuda,Azerbaijan'
317 * ================ Form 3 =======================
319 var fs = new Roo.form.Form({
325 {legend:'Contact Information', style: 'width:320px;' },
326 new Roo.form.TextField({
327 fieldLabel: 'First Name',
332 new Roo.form.TextField({
333 fieldLabel: 'Last Name',
338 new Roo.form.TextField({
339 fieldLabel: 'Company',
344 new Roo.form.TextField({
351 new Roo.form.ComboBox({
354 store: new Roo.data.SimpleStore({
355 fields: ['abbr', 'state'],
356 data : Roo.exampledata.states // from states.js
358 displayField:'state',
361 triggerAction: 'all',
362 emptyText:'Select a state...',
367 new Roo.form.DateField({
368 fieldLabel: 'Date of Birth',
373 new Roo.form.MonthField({
374 fieldLabel: 'Date of Month',
381 fs.addButton('Save');
382 fs.addButton('Cancel');
384 fs.render('form-ct3');
387 * ================ Form 4 =======================
389 var form = new Roo.form.Form({
394 form.column({width:342, labelWidth:75}); // open column, without auto close
396 {legend:'Contact Information'},
397 new Roo.form.TextField({
398 fieldLabel: 'Full Name',
404 new Roo.form.TextField({
405 fieldLabel: 'Job Title',
410 new Roo.form.TextField({
411 fieldLabel: 'Company',
416 new Roo.form.TextArea({
417 fieldLabel: 'Address',
420 preventScrollbars:true,
421 value: '123 example drive'
425 {legend:'Phone Numbers'},
426 new Roo.form.TextField({
429 value: '(123) 456 789'
432 new Roo.form.TextField({
433 fieldLabel: 'Business',
437 new Roo.form.TextField({
438 fieldLabel: 'Mobile',
442 new Roo.form.TextField({
447 form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
451 {width:202, style:'margin-left:10px', clear:true}
455 {id:'photo', legend:'Photo'}
460 {legend:'Options', hideLabels:true},
461 new Roo.form.Checkbox({
462 boxLabel:'RooJS v1.1.1',
466 new Roo.form.Checkbox({
467 boxLabel:'RooJS v2.0.0',
471 new Roo.form.Checkbox({
472 boxLabel:'RooScript',
479 form.end(); // close the column
482 form.applyIfToFields({
486 form.addButton('Save');
487 form.addButton('Cancel');
489 form.render('form-ct4');
491 // The form elements are standard HTML elements. By assigning an id (as we did above)
492 // we can manipulate them like any other element
493 var photo = Roo.get('photo');
494 var c = photo.createChild({
498 src: 'roojs_icon.jpg',
499 style:'margin-bottom:5px;'
506 form5 = new Roo.form.Form({
514 fieldLabel: 'A checkbox',
515 boxLabel:'RooJS v1.1.1',
526 fieldLabel: 'A test radio box',
536 fieldLabel: 'A test radio box2',
547 fieldLabel: 'A checkbox',
548 boxLabel:'RooJS v1.1.1',
557 xtype : 'DisplayField',
560 fieldLabel: 'Simple',
561 value : 'example text'
569 xtype: 'SimpleStore',
571 fields: ['abbr', 'state'],
572 data : Roo.exampledata.states // from states.js
574 displayField:'state',
577 triggerAction: 'all',
578 emptyText:'Select a state...',
584 Roo.MessageBox.alert("Alert", "Add Pressed");
588 Roo.MessageBox.alert("Alert", "Edit Pressed");
597 form5.render('form-ct5');
600 // form6 = new Roo.form.Form({
601 // labelAlign: 'left',
606 // xtype: 'TimePicker',
608 // fieldLabel: 'test time picker',
612 // xtype: 'DateDisplay',
614 // fieldLabel: 'test date picker',
622 // form6.render('form-ct6');
627 * ================ form 7 =======================
629 signature = new Roo.form.Form({
630 labelWidth: 75, // label settings here cascade unless overridden
635 new Roo.form.Signature({
636 fieldLabel: 'Signature',
639 confirm : function (_self)
641 Roo.log(_self.getImageDataURI());
642 Roo.log('in confirm');
649 // form7.addButton('Save');
650 // form7.addButton('Cancel');
652 signature.render('form-ct7');