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',
49 new Roo.form.TextField({
55 new Roo.form.DayPicker({
56 fieldLabel: 'Pick a day',
62 simple.addButton('Save');
63 simple.addButton('Cancel');
65 simple.render('form-ct');
69 * ================ Form 2 =======================
71 mform = new Roo.form.Form({
78 width: 500, // precise column sizes or percentages or straight CSS
81 xtype : 'ComboBoxArray',
83 fieldLabel: 'Multi select test',
85 hiddenName: 'country',
91 displayField : 'state',
93 name : 'countryNames',
94 hiddenName : 'country',
99 xtype : 'SimpleStore',
101 fields: ['abbr', 'state'],
102 data : Roo.exampledata.states // from states.js
110 triggerAction: 'all',
111 emptyText:'Select a state...',
126 width: 500, // precise column sizes or percentages or straight CSS
129 xtype : 'ComboBoxArray',
131 fieldLabel: 'Multi select test',
134 name: 'countrylist_names',
135 hiddenName: 'countrylist',
141 displayField : 'title',
143 // thes are not really needed as parent overwrites them!?
144 name : 'country_name',
145 hiddenName : 'country',
160 xtype : 'ScriptTagProxy',
161 url: 'http://www.roojs.com/forum/topics-remote.php'
165 xtype : 'JsonReader',
167 totalProperty: 'totalCount',
170 {name: 'title', mapping: 'topic_title'},
171 {name: 'topicId', mapping: 'topic_id'},
172 {name: 'author', mapping: 'author'},
173 {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
174 {name: 'excerpt', mapping: 'post_text'}
184 triggerAction: 'all',
185 emptyText:'Select a state...',
204 width: 272, // precise column sizes or percentages or straight CSS
208 fieldLabel: 'First Name',
214 fieldLabel: 'Company',
224 style:'margin-left:10px',
229 fieldLabel: 'Last Name',
249 xtype : 'HtmlEditor',
251 fieldLabel:'Biography',
254 resizable: 's' /// where the handles should got..
261 mform.addButton('Save');
262 mform.addButton('Cancel');
265 mform.render('form-ct2');
268 countryNames : 'Alaska,Louisana',
269 countrylist : 'AG,AZ',
270 countrylist_names : 'Antigua and Barbuda,Azerbaijan'
273 * ================ Form 3 =======================
275 var fs = new Roo.form.Form({
281 {legend:'Contact Information', style: 'width:320px;' },
282 new Roo.form.TextField({
283 fieldLabel: 'First Name',
288 new Roo.form.TextField({
289 fieldLabel: 'Last Name',
294 new Roo.form.TextField({
295 fieldLabel: 'Company',
300 new Roo.form.TextField({
307 new Roo.form.ComboBox({
310 store: new Roo.data.SimpleStore({
311 fields: ['abbr', 'state'],
312 data : Roo.exampledata.states // from states.js
314 displayField:'state',
317 triggerAction: 'all',
318 emptyText:'Select a state...',
323 new Roo.form.DateField({
324 fieldLabel: 'Date of Birth',
329 new Roo.form.DateField({
330 fieldLabel: 'Date of Month',
337 fs.addButton('Save');
338 fs.addButton('Cancel');
340 fs.render('form-ct3');
343 * ================ Form 4 =======================
345 var form = new Roo.form.Form({
350 form.column({width:342, labelWidth:75}); // open column, without auto close
352 {legend:'Contact Information'},
353 new Roo.form.TextField({
354 fieldLabel: 'Full Name',
360 new Roo.form.TextField({
361 fieldLabel: 'Job Title',
366 new Roo.form.TextField({
367 fieldLabel: 'Company',
372 new Roo.form.TextArea({
373 fieldLabel: 'Address',
376 preventScrollbars:true,
377 value: '123 example drive'
381 {legend:'Phone Numbers'},
382 new Roo.form.TextField({
385 value: '(123) 456 789'
388 new Roo.form.TextField({
389 fieldLabel: 'Business',
393 new Roo.form.TextField({
394 fieldLabel: 'Mobile',
398 new Roo.form.TextField({
403 form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
407 {width:202, style:'margin-left:10px', clear:true}
411 {id:'photo', legend:'Photo'}
416 {legend:'Options', hideLabels:true},
417 new Roo.form.Checkbox({
418 boxLabel:'RooJS v1.1.1',
422 new Roo.form.Checkbox({
423 boxLabel:'RooJS v2.0.0',
427 new Roo.form.Checkbox({
428 boxLabel:'RooScript',
435 form.end(); // close the column
438 form.applyIfToFields({
442 form.addButton('Save');
443 form.addButton('Cancel');
445 form.render('form-ct4');
447 // The form elements are standard HTML elements. By assigning an id (as we did above)
448 // we can manipulate them like any other element
449 var photo = Roo.get('photo');
450 var c = photo.createChild({
454 src: 'roojs_icon.jpg',
455 style:'margin-bottom:5px;'
462 form5 = new Roo.form.Form({
470 fieldLabel: 'A checkbox',
471 boxLabel:'RooJS v1.1.1',
478 xtype : 'DisplayField',
481 fieldLabel: 'Simple',
482 value : 'example text'
490 xtype: 'SimpleStore',
492 fields: ['abbr', 'state'],
493 data : Roo.exampledata.states // from states.js
495 displayField:'state',
498 triggerAction: 'all',
499 emptyText:'Select a state...',
505 Roo.MessageBox.alert("Alert", "Add Pressed");
509 Roo.MessageBox.alert("Alert", "Edit Pressed");
518 form5.render('form-ct5');
521 form6 = new Roo.form.Form({
529 fieldLabel: 'test time picker',
533 xtype: 'DateDisplay',
535 fieldLabel: 'test date picker',
543 form6.render('form-ct6');