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