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