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