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: 'countryNames',
90 displayField : 'state',
92 name : 'countryNames',
93 hiddenName : 'country'
98 xtype : 'SimpleStore',
100 fields: ['abbr', 'state'],
101 data : Roo.exampledata.states // from states.js
105 displayField:'state',
108 triggerAction: 'all',
109 emptyText:'Select a state...',
123 width: 272, // precise column sizes or percentages or straight CSS
127 fieldLabel: 'First Name',
133 fieldLabel: 'Company',
143 style:'margin-left:10px',
148 fieldLabel: 'Last Name',
168 xtype : 'HtmlEditor',
170 fieldLabel:'Biography',
173 resizable: 's' /// where the handles should got..
180 mform.addButton('Save');
181 mform.addButton('Cancel');
184 mform.render('form-ct2');
187 countryNames : 'Hong Kong, Singapore'
192 * ================ Form 3 =======================
194 var fs = new Roo.form.Form({
200 {legend:'Contact Information', style: 'width:320px;' },
201 new Roo.form.TextField({
202 fieldLabel: 'First Name',
207 new Roo.form.TextField({
208 fieldLabel: 'Last Name',
213 new Roo.form.TextField({
214 fieldLabel: 'Company',
219 new Roo.form.TextField({
226 new Roo.form.ComboBox({
229 store: new Roo.data.SimpleStore({
230 fields: ['abbr', 'state'],
231 data : Roo.exampledata.states // from states.js
233 displayField:'state',
236 triggerAction: 'all',
237 emptyText:'Select a state...',
242 new Roo.form.DateField({
243 fieldLabel: 'Date of Birth',
250 fs.addButton('Save');
251 fs.addButton('Cancel');
253 fs.render('form-ct3');
256 * ================ Form 4 =======================
258 var form = new Roo.form.Form({
263 form.column({width:342, labelWidth:75}); // open column, without auto close
265 {legend:'Contact Information'},
266 new Roo.form.TextField({
267 fieldLabel: 'Full Name',
273 new Roo.form.TextField({
274 fieldLabel: 'Job Title',
279 new Roo.form.TextField({
280 fieldLabel: 'Company',
285 new Roo.form.TextArea({
286 fieldLabel: 'Address',
289 preventScrollbars:true,
290 value: '123 example drive'
294 {legend:'Phone Numbers'},
295 new Roo.form.TextField({
298 value: '(123) 456 789'
301 new Roo.form.TextField({
302 fieldLabel: 'Business',
306 new Roo.form.TextField({
307 fieldLabel: 'Mobile',
311 new Roo.form.TextField({
316 form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
320 {width:202, style:'margin-left:10px', clear:true}
324 {id:'photo', legend:'Photo'}
329 {legend:'Options', hideLabels:true},
330 new Roo.form.Checkbox({
331 boxLabel:'RooJS v1.1.1',
335 new Roo.form.Checkbox({
336 boxLabel:'RooJS v2.0.0',
340 new Roo.form.Checkbox({
341 boxLabel:'RooScript',
348 form.end(); // close the column
351 form.applyIfToFields({
355 form.addButton('Save');
356 form.addButton('Cancel');
358 form.render('form-ct4');
360 // The form elements are standard HTML elements. By assigning an id (as we did above)
361 // we can manipulate them like any other element
362 var photo = Roo.get('photo');
363 var c = photo.createChild({
367 src: 'roojs_icon.jpg',
368 style:'margin-bottom:5px;'
375 form5 = new Roo.form.Form({
383 fieldLabel: 'A checkbox',
384 boxLabel:'RooJS v1.1.1',
391 xtype : 'DisplayField',
394 fieldLabel: 'Simple',
395 value : 'example text'
403 xtype: 'SimpleStore',
405 fields: ['abbr', 'state'],
406 data : Roo.exampledata.states // from states.js
408 displayField:'state',
411 triggerAction: 'all',
412 emptyText:'Select a state...',
418 Roo.MessageBox.alert("Alert", "Add Pressed");
422 Roo.MessageBox.alert("Alert", "Edit Pressed");
431 form5.render('form-ct5');