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...',
125 width: 272, // precise column sizes or percentages or straight CSS
129 fieldLabel: 'First Name',
135 fieldLabel: 'Company',
145 style:'margin-left:10px',
150 fieldLabel: 'Last Name',
170 xtype : 'HtmlEditor',
172 fieldLabel:'Biography',
175 resizable: 's' /// where the handles should got..
182 mform.addButton('Save');
183 mform.addButton('Cancel');
186 mform.render('form-ct2');
189 countryNames : 'Alaska,Louisana'
194 * ================ Form 3 =======================
196 var fs = new Roo.form.Form({
202 {legend:'Contact Information', style: 'width:320px;' },
203 new Roo.form.TextField({
204 fieldLabel: 'First Name',
209 new Roo.form.TextField({
210 fieldLabel: 'Last Name',
215 new Roo.form.TextField({
216 fieldLabel: 'Company',
221 new Roo.form.TextField({
228 new Roo.form.ComboBox({
231 store: new Roo.data.SimpleStore({
232 fields: ['abbr', 'state'],
233 data : Roo.exampledata.states // from states.js
235 displayField:'state',
238 triggerAction: 'all',
239 emptyText:'Select a state...',
244 new Roo.form.DateField({
245 fieldLabel: 'Date of Birth',
252 fs.addButton('Save');
253 fs.addButton('Cancel');
255 fs.render('form-ct3');
258 * ================ Form 4 =======================
260 var form = new Roo.form.Form({
265 form.column({width:342, labelWidth:75}); // open column, without auto close
267 {legend:'Contact Information'},
268 new Roo.form.TextField({
269 fieldLabel: 'Full Name',
275 new Roo.form.TextField({
276 fieldLabel: 'Job Title',
281 new Roo.form.TextField({
282 fieldLabel: 'Company',
287 new Roo.form.TextArea({
288 fieldLabel: 'Address',
291 preventScrollbars:true,
292 value: '123 example drive'
296 {legend:'Phone Numbers'},
297 new Roo.form.TextField({
300 value: '(123) 456 789'
303 new Roo.form.TextField({
304 fieldLabel: 'Business',
308 new Roo.form.TextField({
309 fieldLabel: 'Mobile',
313 new Roo.form.TextField({
318 form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
322 {width:202, style:'margin-left:10px', clear:true}
326 {id:'photo', legend:'Photo'}
331 {legend:'Options', hideLabels:true},
332 new Roo.form.Checkbox({
333 boxLabel:'RooJS v1.1.1',
337 new Roo.form.Checkbox({
338 boxLabel:'RooJS v2.0.0',
342 new Roo.form.Checkbox({
343 boxLabel:'RooScript',
350 form.end(); // close the column
353 form.applyIfToFields({
357 form.addButton('Save');
358 form.addButton('Cancel');
360 form.render('form-ct4');
362 // The form elements are standard HTML elements. By assigning an id (as we did above)
363 // we can manipulate them like any other element
364 var photo = Roo.get('photo');
365 var c = photo.createChild({
369 src: 'roojs_icon.jpg',
370 style:'margin-bottom:5px;'
377 form5 = new Roo.form.Form({
385 fieldLabel: 'A checkbox',
386 boxLabel:'RooJS v1.1.1',
393 xtype : 'DisplayField',
396 fieldLabel: 'Simple',
397 value : 'example text'
405 xtype: 'SimpleStore',
407 fields: ['abbr', 'state'],
408 data : Roo.exampledata.states // from states.js
410 displayField:'state',
413 triggerAction: 'all',
414 emptyText:'Select a state...',
420 Roo.MessageBox.alert("Alert", "Add Pressed");
424 Roo.MessageBox.alert("Alert", "Edit Pressed");
433 form5.render('form-ct5');