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({
70 width: 272, // precise column sizes or percentages or straight CSS
74 fieldLabel: 'First Name',
80 fieldLabel: 'Company',
90 style:'margin-left:10px',
95 fieldLabel: 'Last Name',
115 xtype : 'HtmlEditor',
117 fieldLabel:'Biography',
126 mform.addButton('Save');
127 mform.addButton('Cancel');
130 mform.render('form-ct2');
133 * ================ Form 3 =======================
135 var fs = new Roo.form.Form({
141 {legend:'Contact Information', style: 'width:320px;' },
142 new Roo.form.TextField({
143 fieldLabel: 'First Name',
148 new Roo.form.TextField({
149 fieldLabel: 'Last Name',
154 new Roo.form.TextField({
155 fieldLabel: 'Company',
160 new Roo.form.TextField({
167 new Roo.form.ComboBox({
170 store: new Roo.data.SimpleStore({
171 fields: ['abbr', 'state'],
172 data : Roo.exampledata.states // from states.js
174 displayField:'state',
177 triggerAction: 'all',
178 emptyText:'Select a state...',
183 new Roo.form.DateField({
184 fieldLabel: 'Date of Birth',
191 fs.addButton('Save');
192 fs.addButton('Cancel');
194 fs.render('form-ct3');
197 * ================ Form 4 =======================
199 var form = new Roo.form.Form({
204 form.column({width:342, labelWidth:75}); // open column, without auto close
206 {legend:'Contact Information'},
207 new Roo.form.TextField({
208 fieldLabel: 'Full Name',
214 new Roo.form.TextField({
215 fieldLabel: 'Job Title',
220 new Roo.form.TextField({
221 fieldLabel: 'Company',
226 new Roo.form.TextArea({
227 fieldLabel: 'Address',
230 preventScrollbars:true,
231 value: '123 example drive'
235 {legend:'Phone Numbers'},
236 new Roo.form.TextField({
239 value: '(123) 456 789'
242 new Roo.form.TextField({
243 fieldLabel: 'Business',
247 new Roo.form.TextField({
248 fieldLabel: 'Mobile',
252 new Roo.form.TextField({
257 form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
261 {width:202, style:'margin-left:10px', clear:true}
265 {id:'photo', legend:'Photo'}
270 {legend:'Options', hideLabels:true},
271 new Roo.form.Checkbox({
272 boxLabel:'RooJS v1.1.1',
276 new Roo.form.Checkbox({
277 boxLabel:'RooJS v2.0.0',
281 new Roo.form.Checkbox({
282 boxLabel:'RooScript',
289 form.end(); // close the column
292 form.applyIfToFields({
296 form.addButton('Save');
297 form.addButton('Cancel');
299 form.render('form-ct4');
301 // The form elements are standard HTML elements. By assigning an id (as we did above)
302 // we can manipulate them like any other element
303 var photo = Roo.get('photo');
304 var c = photo.createChild({
308 src: 'roojs_icon.jpg',
309 style:'margin-bottom:5px;'
316 form5 = new Roo.form.Form({
324 fieldLabel: 'A checkbox',
325 boxLabel:'RooJS v1.1.1',
332 xtype : 'DisplayField',
335 fieldLabel: 'Simple',
336 value : 'example text'
344 xtype: 'SimpleStore',
346 fields: ['abbr', 'state'],
347 data : Roo.exampledata.states // from states.js
349 displayField:'state',
352 triggerAction: 'all',
353 emptyText:'Select a state...',
359 Roo.MessageBox.alert("Alert", "Add Pressed");
363 Roo.MessageBox.alert("Alert", "Edit Pressed");
372 form5.render('form-ct5');