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