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() //,   new Roo.form.HtmlEditor.ToolbarContext()
 103             ],
 104             id:'bio',
 105             name : 'bio',
 106             fieldLabel:'Biography',
 107             width:550,
 108             height:200
 109         })
 110     );
 111
 112     mform.addButton('Save');
 113     mform.addButton('Cancel');
 114
 115     mform.render('form-ct2');
 116
 117     /*
 118      * ================  Form 3  =======================
 119      */
 120     var fs = new Roo.form.Form({
 121         labelAlign: 'right',
 122         labelWidth: 80
 123     });
 124
 125     fs.fieldset(
 126         {legend:'Contact Information', style: 'width:320px;' },
 127         new Roo.form.TextField({
 128             fieldLabel: 'First Name',
 129             name: 'first',
 130             width:190
 131         }),
 132
 133         new Roo.form.TextField({
 134             fieldLabel: 'Last Name',
 135             name: 'last',
 136             width:190
 137         }),
 138
 139         new Roo.form.TextField({
 140             fieldLabel: 'Company',
 141             name: 'company',
 142             width:190
 143         }),
 144
 145         new Roo.form.TextField({
 146             fieldLabel: 'Email',
 147             name: 'email',
 148             vtype:'email',
 149             width:190
 150         }),
 151
 152         new Roo.form.ComboBox({
 153             fieldLabel: 'State',
 154             hiddenName:'state',
 155             store: new Roo.data.SimpleStore({
 156                 fields: ['abbr', 'state'],
 157                 data : Roo.exampledata.states // from states.js
 158             }),
 159             displayField:'state',
 160             typeAhead: true,
 161             mode: 'local',
 162             triggerAction: 'all',
 163             emptyText:'Select a state...',
 164             selectOnFocus:true,
 165             width:190
 166         }),
 167
 168         new Roo.form.DateField({
 169             fieldLabel: 'Date of Birth',
 170             name: 'dob',
 171             width:190,
 172             allowBlank:false
 173         })
 174     );
 175
 176     fs.addButton('Save');
 177     fs.addButton('Cancel');
 178
 179     fs.render('form-ct3');
 180
 181     /*
 182      * ================  Form 4  =======================
 183      */
 184     var form = new Roo.form.Form({
 185         labelAlign: 'right',
 186         labelWidth: 75
 187     });
 188
 189     form.column({width:342, labelWidth:75}); // open column, without auto close
 190     form.fieldset(
 191         {legend:'Contact Information'},
 192         new Roo.form.TextField({
 193             fieldLabel: 'Full Name',
 194             name: 'fullName',
 195             allowBlank:false,
 196             value: 'Fred Blogs'
 197         }),
 198
 199         new Roo.form.TextField({
 200             fieldLabel: 'Job Title',
 201             name: 'title',
 202             value: 'RooJS user'
 203         }),
 204
 205         new Roo.form.TextField({
 206             fieldLabel: 'Company',
 207             name: 'company',
 208             value: 'RooJS'
 209         }),
 210
 211         new Roo.form.TextArea({
 212             fieldLabel: 'Address',
 213             name: 'address',
 214             grow: true,
 215             preventScrollbars:true,
 216             value: '123 example drive'
 217         })
 218     );
 219     form.fieldset(
 220         {legend:'Phone Numbers'},
 221         new Roo.form.TextField({
 222             fieldLabel: 'Home',
 223             name: 'home',
 224             value: '(123) 456 789'
 225         }),
 226
 227         new Roo.form.TextField({
 228             fieldLabel: 'Business',
 229             name: 'business'
 230         }),
 231
 232         new Roo.form.TextField({
 233             fieldLabel: 'Mobile',
 234             name: 'mobile'
 235         }),
 236
 237         new Roo.form.TextField({
 238             fieldLabel: 'Fax',
 239             name: 'fax'
 240         })
 241     );
 242     form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
 243
 244
 245     form.column(
 246         {width:202, style:'margin-left:10px', clear:true}
 247     );
 248
 249     form.fieldset(
 250         {id:'photo', legend:'Photo'}
 251     );
 252     form.end();
 253
 254     form.fieldset(
 255         {legend:'Options', hideLabels:true},
 256         new Roo.form.Checkbox({
 257             boxLabel:'RooJS v1.1.1',
 258             name:'extuser',
 259             width:'auto'
 260         }),
 261         new Roo.form.Checkbox({
 262             boxLabel:'RooJS v2.0.0',
 263             name:'extcomm',
 264             width:'auto'
 265         }),
 266         new Roo.form.Checkbox({
 267             boxLabel:'RooScript',
 268             name:'extprem',
 269             width:'auto'
 270         })
 271
 272     );
 273
 274     form.end(); // close the column
 275
 276
 277     form.applyIfToFields({
 278         width:230
 279     });
 280
 281     form.addButton('Save');
 282     form.addButton('Cancel');
 283
 284     form.render('form-ct4');
 285
 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({
 290         tag:'center',
 291         cn: {
 292             tag:'img',
 293             src: 'roojs_icon.jpg',
 294             style:'margin-bottom:5px;'
 295         }
 296     });
 297     new Roo.Button(c, {
 298         text: 'Change Photo'
 299     });
 300
 301    form5 = new Roo.form.Form({
 302         labelAlign: 'left',
 303         labelWidth: 120,
 304         items : [
 305             {
 306
 307                 xtype: 'Checkbox',
 308                 xns : Roo.form,
 309                fieldLabel: 'A checkbox',
 310                 boxLabel:'RooJS v1.1.1',
 311                 name:'extuser',
 312                 width:'auto'
 313             },
 314             {
 315                 xtype : 'DisplayField',
 316                 xns : Roo.form,
 317                 name:'textex',
 318                 fieldLabel: 'Simple',
 319                 value : 'example text'
 320             } ,
 321             {
 322                 xtype: 'ComboBox',
 323                 xns : Roo.form,
 324                 fieldLabel: 'State',
 325                 hiddenName:'state',
 326                 store: {
 327                     xtype: 'SimpleStore',
 328                     xns : Roo.data,
 329                     fields: ['abbr', 'state'],
 330                     data : Roo.exampledata.states // from states.js
 331                 },
 332                 displayField:'state',
 333                 typeAhead: true,
 334                 mode: 'local',
 335                 triggerAction: 'all',
 336                 emptyText:'Select a state...',
 337                 selectOnFocus:true,
 338                 width:190,
 339                 listeners : {
 340                     add : function()
 341                     {
 342                         Roo.MessageBox.alert("Alert", "Add Pressed");
 343                     },
 344                     edit : function()
 345                     {
 346                         Roo.MessageBox.alert("Alert", "Edit Pressed");
 347                     }
 348
 349                 }
 350             },
 351
 352         ]
 353     });
 354
 355     form5.render('form-ct5');
 356
 357
 358
 359
 360
 361 });