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">
13 Roo.onReady(function(){
17 // turn on validation errors beside the field globally
18 Roo.form.Field.prototype.msgTarget = 'side';
21 * ================ Simple form =======================
23 var simple = new Roo.form.Form({
24 labelWidth: 75, // label settings here cascade unless overridden
28 new Roo.form.TextField({
29 fieldLabel: 'First Name',
35 new Roo.form.TextField({
36 fieldLabel: 'Last Name',
41 new Roo.form.TextField({
42 fieldLabel: 'Company',
47 new Roo.form.TextField({
55 simple.addButton('Save');
56 simple.addButton('Cancel');
58 simple.render('form-ct');
62 * ================ Form 2 =======================
64 mform = new Roo.form.Form({
69 {width:282}, // precise column sizes or percentages or straight CSS
70 new Roo.form.TextField({
71 fieldLabel: 'First Name',
76 new Roo.form.TextField({
77 fieldLabel: 'Company',
84 {width:272, style:'margin-left:10px', clear:true}, // apply custom css, clear:true means it is the last column
85 new Roo.form.TextField({
86 fieldLabel: 'Last Name',
91 new Roo.form.TextField({
100 new Roo.form.HtmlEditor({
102 new Roo.form.HtmlEditor.ToolbarStandard() //, new Roo.form.HtmlEditor.ToolbarContext()
106 fieldLabel:'Biography',
112 mform.addButton('Save');
113 mform.addButton('Cancel');
115 mform.render('form-ct2');
118 * ================ Form 3 =======================
120 var fs = new Roo.form.Form({
126 {legend:'Contact Information', style: 'width:320px;' },
127 new Roo.form.TextField({
128 fieldLabel: 'First Name',
133 new Roo.form.TextField({
134 fieldLabel: 'Last Name',
139 new Roo.form.TextField({
140 fieldLabel: 'Company',
145 new Roo.form.TextField({
152 new Roo.form.ComboBox({
155 store: new Roo.data.SimpleStore({
156 fields: ['abbr', 'state'],
157 data : Roo.exampledata.states // from states.js
159 displayField:'state',
162 triggerAction: 'all',
163 emptyText:'Select a state...',
168 new Roo.form.DateField({
169 fieldLabel: 'Date of Birth',
176 fs.addButton('Save');
177 fs.addButton('Cancel');
179 fs.render('form-ct3');
182 * ================ Form 4 =======================
184 var form = new Roo.form.Form({
189 form.column({width:342, labelWidth:75}); // open column, without auto close
191 {legend:'Contact Information'},
192 new Roo.form.TextField({
193 fieldLabel: 'Full Name',
199 new Roo.form.TextField({
200 fieldLabel: 'Job Title',
205 new Roo.form.TextField({
206 fieldLabel: 'Company',
211 new Roo.form.TextArea({
212 fieldLabel: 'Address',
215 preventScrollbars:true,
216 value: '123 example drive'
220 {legend:'Phone Numbers'},
221 new Roo.form.TextField({
224 value: '(123) 456 789'
227 new Roo.form.TextField({
228 fieldLabel: 'Business',
232 new Roo.form.TextField({
233 fieldLabel: 'Mobile',
237 new Roo.form.TextField({
242 form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
246 {width:202, style:'margin-left:10px', clear:true}
250 {id:'photo', legend:'Photo'}
255 {legend:'Options', hideLabels:true},
256 new Roo.form.Checkbox({
257 boxLabel:'RooJS v1.1.1',
261 new Roo.form.Checkbox({
262 boxLabel:'RooJS v2.0.0',
266 new Roo.form.Checkbox({
267 boxLabel:'RooScript',
274 form.end(); // close the column
277 form.applyIfToFields({
281 form.addButton('Save');
282 form.addButton('Cancel');
284 form.render('form-ct4');
286 // The form elements are standard HTML elements. By assigning an id (as we did above)
287 // we can manipulate them like any other element
288 var photo = Roo.get('photo');
289 var c = photo.createChild({
293 src: 'roojs_icon.jpg',
294 style:'margin-bottom:5px;'
301 form5 = new Roo.form.Form({
309 fieldLabel: 'A checkbox',
310 boxLabel:'RooJS v1.1.1',
315 xtype : 'DisplayField',
318 fieldLabel: 'Simple',
319 value : 'example text'
327 xtype: 'SimpleStore',
329 fields: ['abbr', 'state'],
330 data : Roo.exampledata.states // from states.js
332 displayField:'state',
335 triggerAction: 'all',
336 emptyText:'Select a state...',
342 Roo.MessageBox.alert("Alert", "Add Pressed");
346 Roo.MessageBox.alert("Alert", "Edit Pressed");
355 form5.render('form-ct5');