git.roojs.org Git - roojs1/blob - examples/form/dynamic.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12 var mform;\r
  13 Roo.onReady(function(){
  14
  15     Roo.QuickTips.init();
  16
  17     // turn on validation errors beside the field globally
  18     Roo.form.Field.prototype.msgTarget = 'side';
  19
  20     /*
  21      * ================  Simple form  =======================
  22      */
  23     var simple = new Roo.form.Form({
  24         labelWidth: 75, // label settings here cascade unless overridden
  25         url:'save-form.php'
  26     });
  27     simple.add(
  28         new Roo.form.TextField({
  29             fieldLabel: 'First Name',
  30             name: 'first',
  31             width:175,
  32             allowBlank:false
  33         }),
  34
  35         new Roo.form.TextField({
  36             fieldLabel: 'Last Name',
  37             name: 'last',
  38             width:175
  39         }),
  40
  41         new Roo.form.TextField({
  42             fieldLabel: 'Company',
  43             name: 'company',
  44             width:175
  45         }),
  46
  47         new Roo.form.TextField({
  48             fieldLabel: 'Email',
  49             name: 'email',
  50             vtype:'email',
  51             width:175
  52         })
  53     );
  54
  55     simple.addButton('Save');
  56     simple.addButton('Cancel');
  57
  58     simple.render('form-ct');
  59
  60
  61     /*
  62      * ================  Form 2  =======================
  63      */
  64     mform = new Roo.form.Form({
  65         labelAlign: 'top'
  66     });
  67
  68     mform.column(
  69         {width:282}, // precise column sizes or percentages or straight CSS
  70         new Roo.form.TextField({
  71             fieldLabel: 'First Name',
  72             name: 'first',
  73             width:225
  74         }),
  75
  76         new Roo.form.TextField({
  77             fieldLabel: 'Company',
  78             name: 'company',
  79             width:225
  80         })
  81     );
  82
  83     mform.column(
  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',
  87             name: 'last',
  88             width:225
  89         }),
  90
  91         new Roo.form.TextField({
  92             fieldLabel: 'Email',
  93             name: 'email',
  94             vtype:'email',
  95             width:225
  96         })
  97     );
  98
  99     mform.container({},
 100         new Roo.form.HtmlEditor({
 101             toolbars : [
 102                 new Roo.form.HtmlEditor.ToolbarStandard(),
 103                 new Roo.form.HtmlEditor.ToolbarContext()
 104             ],
 105             id:'bio',
 106             name : 'bio',
 107             fieldLabel:'Biography',
 108             width:550,
 109             height:200
 110         })
 111     );
 112
 113     mform.addButton('Save');
 114     mform.addButton('Cancel');
 115
 116     mform.render('form-ct2');
 117
 118     /*
 119      * ================  Form 3  =======================
 120      */
 121     var fs = new Roo.form.Form({
 122         labelAlign: 'right',
 123         labelWidth: 80
 124     });
 125
 126     fs.fieldset(
 127         {legend:'Contact Information', style: 'width:320px;' },
 128         new Roo.form.TextField({
 129             fieldLabel: 'First Name',
 130             name: 'first',
 131             width:190
 132         }),
 133
 134         new Roo.form.TextField({
 135             fieldLabel: 'Last Name',
 136             name: 'last',
 137             width:190
 138         }),
 139
 140         new Roo.form.TextField({
 141             fieldLabel: 'Company',
 142             name: 'company',
 143             width:190
 144         }),
 145
 146         new Roo.form.TextField({
 147             fieldLabel: 'Email',
 148             name: 'email',
 149             vtype:'email',
 150             width:190
 151         }),
 152
 153         new Roo.form.ComboBox({
 154             fieldLabel: 'State',
 155             hiddenName:'state',
 156             store: new Roo.data.SimpleStore({
 157                 fields: ['abbr', 'state'],
 158                 data : Roo.exampledata.states // from states.js
 159             }),
 160             displayField:'state',
 161             typeAhead: true,
 162             mode: 'local',
 163             triggerAction: 'all',
 164             emptyText:'Select a state...',
 165             selectOnFocus:true,
 166             width:190
 167         }),
 168
 169         new Roo.form.DateField({
 170             fieldLabel: 'Date of Birth',
 171             name: 'dob',
 172             width:190,
 173             allowBlank:false
 174         })
 175     );
 176
 177     fs.addButton('Save');
 178     fs.addButton('Cancel');
 179
 180     fs.render('form-ct3');
 181
 182     /*
 183      * ================  Form 4  =======================
 184      */
 185     var form = new Roo.form.Form({
 186         labelAlign: 'right',
 187         labelWidth: 75
 188     });
 189
 190     form.column({width:342, labelWidth:75}); // open column, without auto close
 191     form.fieldset(
 192         {legend:'Contact Information'},
 193         new Roo.form.TextField({
 194             fieldLabel: 'Full Name',
 195             name: 'fullName',
 196             allowBlank:false,
 197             value: 'Fred Blogs'
 198         }),
 199
 200         new Roo.form.TextField({
 201             fieldLabel: 'Job Title',
 202             name: 'title',
 203             value: 'RooJS user'
 204         }),
 205
 206         new Roo.form.TextField({
 207             fieldLabel: 'Company',
 208             name: 'company',
 209             value: 'RooJS'
 210         }),
 211
 212         new Roo.form.TextArea({
 213             fieldLabel: 'Address',
 214             name: 'address',
 215             grow: true,
 216             preventScrollbars:true,
 217             value: '123 example drive'
 218         })
 219     );
 220     form.fieldset(
 221         {legend:'Phone Numbers'},
 222         new Roo.form.TextField({
 223             fieldLabel: 'Home',
 224             name: 'home',
 225             value: '(123) 456 789'
 226         }),
 227
 228         new Roo.form.TextField({
 229             fieldLabel: 'Business',
 230             name: 'business'
 231         }),
 232
 233         new Roo.form.TextField({
 234             fieldLabel: 'Mobile',
 235             name: 'mobile'
 236         }),
 237
 238         new Roo.form.TextField({
 239             fieldLabel: 'Fax',
 240             name: 'fax'
 241         })
 242     );
 243     form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
 244
 245
 246     form.column(
 247         {width:202, style:'margin-left:10px', clear:true}
 248     );
 249
 250     form.fieldset(
 251         {id:'photo', legend:'Photo'}
 252     );
 253     form.end();
 254
 255     form.fieldset(
 256         {legend:'Options', hideLabels:true},
 257         new Roo.form.Checkbox({
 258             boxLabel:'RooJS v1.1.1',
 259             name:'extuser',
 260             width:'auto'
 261         }),
 262         new Roo.form.Checkbox({
 263             boxLabel:'RooJS v2.0.0',
 264             name:'extcomm',
 265             width:'auto'
 266         }),
 267         new Roo.form.Checkbox({
 268             boxLabel:'RooScript',
 269             name:'extprem',
 270             width:'auto'
 271         })
 272
 273     );
 274
 275     form.end(); // close the column
 276
 277
 278     form.applyIfToFields({
 279         width:230
 280     });
 281
 282     form.addButton('Save');
 283     form.addButton('Cancel');
 284
 285     form.render('form-ct4');
 286
 287     // The form elements are standard HTML elements. By assigning an id (as we did above)
 288     // we can manipulate them like any other element
 289     var photo = Roo.get('photo');
 290     var c = photo.createChild({
 291         tag:'center',
 292         cn: {
 293             tag:'img',
 294             src: 'roojs_icon.jpg',
 295             style:'margin-bottom:5px;'
 296         }
 297     });
 298     new Roo.Button(c, {
 299         text: 'Change Photo'
 300     });
 301 });