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