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 var signature;
  15
  16 Roo.onReady(function(){
  17
  18     Roo.QuickTips.init();
  19
  20     // turn on validation errors beside the field globally
  21     Roo.form.Field.prototype.msgTarget = 'side';
  22
  23     /*
  24      * ================  Simple form  =======================
  25      */
  26     simple = new Roo.form.Form({
  27         labelWidth: 75, // label settings here cascade unless overridden
  28         url:'save-form.php'
  29     });
  30     simple.add(
  31         new Roo.form.TextField({
  32             fieldLabel: 'First Name',
  33             name: 'first',
  34             width:175,
  35             allowBlank:false
  36         }),
  37
  38         new Roo.form.TextField({
  39             fieldLabel: 'Last Name',
  40             name: 'last',
  41             width:175
  42         }),
  43
  44         new Roo.form.TextField({
  45             fieldLabel: 'Company',
  46             name: 'company',
  47             width:175
  48         }),
  49         new Roo.form.TextField({
  50             fieldLabel: 'Password',
  51             name: 'pwd',
  52             inputType: 'password',
  53             width:175
  54         }),
  55
  56         new Roo.form.TextField({
  57             fieldLabel: 'Email',
  58             name: 'email',
  59             vtype:'email',
  60             width:175
  61         }),
  62         new Roo.form.DayPicker({
  63             fieldLabel: 'Pick a day',
  64             name: 'daypick',
  65             width:175
  66         })
  67     );
  68
  69     simple.addButton('Save');
  70     simple.addButton('Cancel');
  71
  72     simple.render('form-ct');
  73
  74
  75     /*
  76      * ================  Form 2  =======================
  77      */
  78     mform = new Roo.form.Form({
  79         labelAlign: 'top',
  80         items : [
  81
  82             {
  83
  84                 xtype : 'Column',
  85                 width: 500, // precise column sizes or percentages or straight CSS
  86                 items : [
  87                     {
  88                         xtype : 'ComboBoxArray',
  89                         xns : Roo.form,
  90                         fieldLabel: 'Multi select test',
  91                         name: 'countryNames',
  92                         hiddenName: 'country',
  93
  94                         width: 550,
  95                         combo : {
  96
  97                             valueField : 'abbr',
  98                             displayField : 'state',
  99
 100                             name : 'countryNames',
 101                             hiddenName : 'country',
 102
 103                             xtype : 'ComboBox',
 104                             xns : Roo.form,
 105                             store: {
 106                                 xtype : 'SimpleStore',
 107                                 xns: Roo.data,
 108                                 fields: ['abbr', 'state'],
 109                                 data : Roo.exampledata.states // from states.js
 110                             },
 111                             width: 200,
 112                             listWidth : 300,
 113                             editable : false,
 114
 115                             typeAhead: false,
 116                             mode: 'local',
 117                             triggerAction: 'all',
 118                             emptyText:'Select a state...',
 119                             selectOnFocus:true,
 120                             resizable:true
 121                         }
 122
 123
 124                     }
 125
 126                 ]
 127             },
 128
 129
 130             {
 131
 132                 xtype : 'Column',
 133                 width: 500, // precise column sizes or percentages or straight CSS
 134                 items : [
 135                     {
 136                         xtype : 'ComboBoxArray',
 137                         xns : Roo.form,
 138                         fieldLabel: 'Multi select test',
 139
 140
 141                         name: 'countrylist_names',
 142                         hiddenName: 'countrylist',
 143
 144                         width: 550,
 145                         combo : {
 146
 147                             valueField : 'code',
 148                             displayField : 'title',
 149
 150                             // thes are not really needed as parent overwrites them!?
 151                             name : 'country_name',
 152                             hiddenName : 'country',
 153
 154                             xtype : 'ComboBox',
 155                             xns : Roo.form,
 156
 157
 158
 159
 160
 161                             store: {
 162                                 xtype : 'Store',
 163                                 xns: Roo.data,
 164
 165                                 proxy: {
 166                                     xns : Roo.data,
 167                                     xtype : 'ScriptTagProxy',
 168                                     url: 'http://www.roojs.com/forum/topics-remote.php'
 169                                 },
 170                                 reader: {
 171                                     xns : Roo.data,
 172                                     xtype : 'JsonReader',
 173                                     root: 'topics',
 174                                     totalProperty: 'totalCount',
 175                                     id: 'post_id',
 176                                     fields : [
 177                                         {name: 'title', mapping: 'topic_title'},
 178                                         {name: 'topicId', mapping: 'topic_id'},
 179                                         {name: 'author', mapping: 'author'},
 180                                         {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
 181                                         {name: 'excerpt', mapping: 'post_text'}
 182                                     ]
 183                                 }
 184                             },
 185                             width: 200,
 186                             listWidth : 300,
 187                             editable : false,
 188
 189                             typeAhead: false,
 190                             mode: 'local',
 191                             triggerAction: 'all',
 192                             emptyText:'Select a state...',
 193                             selectOnFocus:true,
 194                             resizable:true
 195                         }
 196
 197
 198                     }
 199
 200                 ]
 201             },
 202
 203
 204
 205
 206
 207
 208             {
 209
 210                 xtype : 'Column',
 211                 width: 272, // precise column sizes or percentages or straight CSS
 212                 items : [
 213                     {
 214                         xtype : 'TextField',
 215                         fieldLabel: 'First Name',
 216                         name: 'first',
 217                         width:225
 218                     },
 219                     {
 220                         xtype : 'TextField',
 221                         fieldLabel: 'Company',
 222                         name: 'company',
 223                         width:225
 224                     }
 225                 ]
 226             },
 227
 228             {
 229                 xtype : 'Column',
 230                 width:272,
 231                 style:'margin-left:10px',
 232                 clear:true,
 233                 items : [
 234                     {
 235                         xtype : 'TextField',
 236                         fieldLabel: 'Last Name',
 237                         name: 'last',
 238                         width:225
 239                     },
 240                     {
 241                         xtype : 'TextField',
 242                         fieldLabel: 'Email',
 243                         name: 'email',
 244                         vtype:'email',
 245                         width:225
 246                     }
 247                 ]
 248             },
 249             {
 250
 251                 xtype : 'Column',
 252                 width:600,
 253                 labelAlign: 'top',
 254                 items : [
 255                     {
 256                         xtype : 'HtmlEditor',
 257                         name : 'bio',
 258                         fieldLabel:'Biography',
 259                         width:550,
 260                         height:200,
 261                         resizable: 's', /// where the handles should got..
 262                         toolbars : [ 'ToolbarStandard', 'ToolbarContext' ]
 263                     }
 264                 ]
 265             }
 266         ]
 267
 268     });
 269     mform.addButton('Save');
 270     mform.addButton('Cancel');
 271
 272
 273     mform.render('form-ct2');
 274     mform.setValues({
 275         country  : 'AK,LA',
 276         countryNames : 'Alaska,Louisana',
 277         countrylist  : 'AG,AZ',
 278         countrylist_names : 'Antigua and Barbuda,Azerbaijan'
 279     });
 280     /*
 281      * ================  Form 3  =======================
 282      */
 283     var fs = new Roo.form.Form({
 284         labelAlign: 'right',
 285         labelWidth: 80
 286     });
 287
 288     fs.fieldset(
 289         {legend:'Contact Information', style: 'width:320px;' },
 290         new Roo.form.TextField({
 291             fieldLabel: 'First Name',
 292             name: 'first',
 293             width:190
 294         }),
 295
 296         new Roo.form.TextField({
 297             fieldLabel: 'Last Name',
 298             name: 'last',
 299             width:190
 300         }),
 301
 302         new Roo.form.TextField({
 303             fieldLabel: 'Company',
 304             name: 'company',
 305             width:190
 306         }),
 307
 308         new Roo.form.TextField({
 309             fieldLabel: 'Email',
 310             name: 'email',
 311             vtype:'email',
 312             width:190
 313         }),
 314
 315         new Roo.form.ComboBox({
 316             fieldLabel: 'State',
 317             hiddenName:'state',
 318             store: new Roo.data.SimpleStore({
 319                 fields: ['abbr', 'state'],
 320                 data : Roo.exampledata.states // from states.js
 321             }),
 322             displayField:'state',
 323             typeAhead: true,
 324             mode: 'local',
 325             triggerAction: 'all',
 326             emptyText:'Select a state...',
 327             selectOnFocus:true,
 328             width:190
 329         }),
 330
 331         new Roo.form.DateField({
 332             fieldLabel: 'Date of Birth',
 333             name: 'dob',
 334             width:190,
 335             allowBlank:false
 336         }),
 337         new Roo.form.MonthField({
 338             fieldLabel: 'Date of Month',
 339             name: 'dom',
 340             width:190,
 341             allowBlank:false
 342         })
 343     );
 344
 345     fs.addButton('Save');
 346     fs.addButton('Cancel');
 347
 348     fs.render('form-ct3');
 349
 350     /*
 351      * ================  Form 4  =======================
 352      */
 353     var form = new Roo.form.Form({
 354         labelAlign: 'right',
 355         labelWidth: 75
 356     });
 357
 358     form.column({width:342, labelWidth:75}); // open column, without auto close
 359     form.fieldset(
 360         {legend:'Contact Information'},
 361         new Roo.form.TextField({
 362             fieldLabel: 'Full Name',
 363             name: 'fullName',
 364             allowBlank:false,
 365             value: 'Fred Blogs'
 366         }),
 367
 368         new Roo.form.TextField({
 369             fieldLabel: 'Job Title',
 370             name: 'title',
 371             value: 'RooJS user'
 372         }),
 373
 374         new Roo.form.TextField({
 375             fieldLabel: 'Company',
 376             name: 'company',
 377             value: 'RooJS'
 378         }),
 379
 380         new Roo.form.TextArea({
 381             fieldLabel: 'Address',
 382             name: 'address',
 383             grow: true,
 384             preventScrollbars:true,
 385             value: '123 example drive'
 386         })
 387     );
 388     form.fieldset(
 389         {legend:'Phone Numbers'},
 390         new Roo.form.TextField({
 391             fieldLabel: 'Home',
 392             name: 'home',
 393             value: '(123) 456 789'
 394         }),
 395
 396         new Roo.form.TextField({
 397             fieldLabel: 'Business',
 398             name: 'business'
 399         }),
 400
 401         new Roo.form.TextField({
 402             fieldLabel: 'Mobile',
 403             name: 'mobile'
 404         }),
 405
 406         new Roo.form.TextField({
 407             fieldLabel: 'Fax',
 408             name: 'fax'
 409         })
 410     );
 411     form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
 412
 413
 414     form.column(
 415         {width:202, style:'margin-left:10px', clear:true}
 416     );
 417
 418     form.fieldset(
 419         {id:'photo', legend:'Photo'}
 420     );
 421     form.end();
 422
 423     form.fieldset(
 424         {legend:'Options', hideLabels:true},
 425         new Roo.form.Checkbox({
 426             boxLabel:'RooJS v1.1.1',
 427             name:'extuser',
 428             width:'auto'
 429         }),
 430         new Roo.form.Checkbox({
 431             boxLabel:'RooJS v2.0.0',
 432             name:'extcomm',
 433             width:'auto'
 434         }),
 435         new Roo.form.Checkbox({
 436             boxLabel:'RooScript',
 437             name:'extprem',
 438             width:'auto'
 439         })
 440
 441     );
 442
 443     form.end(); // close the column
 444
 445
 446     form.applyIfToFields({
 447         width:230
 448     });
 449
 450     form.addButton('Save');
 451     form.addButton('Cancel');
 452
 453     form.render('form-ct4');
 454
 455     // The form elements are standard HTML elements. By assigning an id (as we did above)
 456     // we can manipulate them like any other element
 457     var photo = Roo.get('photo');
 458     var c = photo.createChild({
 459         tag:'center',
 460         cn: {
 461             tag:'img',
 462             src: 'roojs_icon.jpg',
 463             style:'margin-bottom:5px;'
 464         }
 465     });
 466     new Roo.Button(c, {
 467         text: 'Change Photo'
 468     });
 469
 470    form5 = new Roo.form.Form({
 471         labelAlign: 'left',
 472         labelWidth: 120,
 473         items : [
 474             {
 475
 476                 xtype: 'Checkbox',
 477                 xns : Roo.form,
 478                fieldLabel: 'A checkbox',
 479                 boxLabel:'RooJS v1.1.1',
 480                 name:'extuser',
 481                 inputValue : '1',
 482                 value : '1',
 483                 width:'auto'
 484             },
 485             {
 486                 xtype : 'DisplayField',
 487                 xns : Roo.form,
 488                 name:'textex',
 489                 fieldLabel: 'Simple',
 490                 value : 'example text'
 491             } ,
 492             {
 493                 xtype: 'ComboBox',
 494                 xns : Roo.form,
 495                 fieldLabel: 'State',
 496                 hiddenName:'state',
 497                 store: {
 498                     xtype: 'SimpleStore',
 499                     xns : Roo.data,
 500                     fields: ['abbr', 'state'],
 501                     data : Roo.exampledata.states // from states.js
 502                 },
 503                 displayField:'state',
 504                 typeAhead: true,
 505                 mode: 'local',
 506                 triggerAction: 'all',
 507                 emptyText:'Select a state...',
 508                 selectOnFocus:true,
 509                 width:190,
 510                 listeners : {
 511                     add : function()
 512                     {
 513                         Roo.MessageBox.alert("Alert", "Add Pressed");
 514                     },
 515                     edit : function()
 516                     {
 517                         Roo.MessageBox.alert("Alert", "Edit Pressed");
 518                     }
 519
 520                 }
 521             },
 522
 523         ]
 524     });
 525
 526     form5.render('form-ct5');
 527
 528
 529 //    form6 = new Roo.form.Form({
 530 //        labelAlign: 'left',
 531 //        labelWidth: 120,
 532 //        items : [
 533 //            {
 534 //
 535 //                xtype: 'TimePicker',
 536 //                xns : Roo.form,
 537 //                fieldLabel: 'test time picker',
 538 //                name: 'time'
 539 //            },
 540 //            {
 541 //                xtype: 'DateDisplay',
 542 //                xns : Roo.form,
 543 //                fieldLabel: 'test date picker',
 544 //                name: 'date'
 545 //            }
 546 //
 547 //
 548 //        ]
 549 //    });
 550 //
 551 //    form6.render('form-ct6');
 552
 553
 554
 555     /*
 556      * ================ form 7 =======================
 557      */
 558     var signature = new Roo.form.Form({
 559         labelWidth: 75, // label settings here cascade unless overridden
 560         url:'save-form.php'
 561     });
 562     signature.add(
 563         new Roo.form.Signature({
 564             fieldLabel: 'Signature',
 565             name: 's',
 566             width: 300
 567         })
 568     );
 569 //
 570 //    form7.addButton('Save');
 571 //    form7.addButton('Cancel');
 572
 573     signature.render('form-ct7');
 574
 575
 576
 577
 578
 579 });