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..
267 mform.addButton('Save');
268 mform.addButton('Cancel');
271 mform.render('form-ct2');
274 countryNames : 'Alaska,Louisana',
275 countrylist : 'AG,AZ',
276 countrylist_names : 'Antigua and Barbuda,Azerbaijan'
279 * ================ Form 3 =======================
281 var fs = new Roo.form.Form({
287 {legend:'Contact Information', style: 'width:320px;' },
288 new Roo.form.TextField({
289 fieldLabel: 'First Name',
294 new Roo.form.TextField({
295 fieldLabel: 'Last Name',
300 new Roo.form.TextField({
301 fieldLabel: 'Company',
306 new Roo.form.TextField({
313 new Roo.form.ComboBox({
316 store: new Roo.data.SimpleStore({
317 fields: ['abbr', 'state'],
318 data : Roo.exampledata.states // from states.js
320 displayField:'state',
323 triggerAction: 'all',
324 emptyText:'Select a state...',
329 new Roo.form.DateField({
330 fieldLabel: 'Date of Birth',
335 new Roo.form.MonthField({
336 fieldLabel: 'Date of Month',
343 fs.addButton('Save');
344 fs.addButton('Cancel');
346 fs.render('form-ct3');
349 * ================ Form 4 =======================
351 var form = new Roo.form.Form({
356 form.column({width:342, labelWidth:75}); // open column, without auto close
358 {legend:'Contact Information'},
359 new Roo.form.TextField({
360 fieldLabel: 'Full Name',
366 new Roo.form.TextField({
367 fieldLabel: 'Job Title',
372 new Roo.form.TextField({
373 fieldLabel: 'Company',
378 new Roo.form.TextArea({
379 fieldLabel: 'Address',
382 preventScrollbars:true,
383 value: '123 example drive'
387 {legend:'Phone Numbers'},
388 new Roo.form.TextField({
391 value: '(123) 456 789'
394 new Roo.form.TextField({
395 fieldLabel: 'Business',
399 new Roo.form.TextField({
400 fieldLabel: 'Mobile',
404 new Roo.form.TextField({
409 form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
413 {width:202, style:'margin-left:10px', clear:true}
417 {id:'photo', legend:'Photo'}
422 {legend:'Options', hideLabels:true},
423 new Roo.form.Checkbox({
424 boxLabel:'RooJS v1.1.1',
428 new Roo.form.Checkbox({
429 boxLabel:'RooJS v2.0.0',
433 new Roo.form.Checkbox({
434 boxLabel:'RooScript',
441 form.end(); // close the column
444 form.applyIfToFields({
448 form.addButton('Save');
449 form.addButton('Cancel');
451 form.render('form-ct4');
453 // The form elements are standard HTML elements. By assigning an id (as we did above)
454 // we can manipulate them like any other element
455 var photo = Roo.get('photo');
456 var c = photo.createChild({
460 src: 'roojs_icon.jpg',
461 style:'margin-bottom:5px;'
468 form5 = new Roo.form.Form({
476 fieldLabel: 'A checkbox',
477 boxLabel:'RooJS v1.1.1',
484 xtype : 'DisplayField',
487 fieldLabel: 'Simple',
488 value : 'example text'
496 xtype: 'SimpleStore',
498 fields: ['abbr', 'state'],
499 data : Roo.exampledata.states // from states.js
501 displayField:'state',
504 triggerAction: 'all',
505 emptyText:'Select a state...',
511 Roo.MessageBox.alert("Alert", "Add Pressed");
515 Roo.MessageBox.alert("Alert", "Edit Pressed");
524 form5.render('form-ct5');
527 form6 = new Roo.form.Form({
535 fieldLabel: 'test time picker',
539 xtype: 'DateDisplay',
541 fieldLabel: 'test date picker',
549 form6.render('form-ct6');