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