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                         store: {
 257                              xtype : 'Store',
 258                              xns: Roo.data,
 259
 260                              proxy: {
 261                                  xns : Roo.data,
 262                                  xtype : 'HttpProxy',
 263                                  url: 'sample.data.json'
 264                              },
 265                              reader: {
 266                                  xns : Roo.data,
 267                                  xtype : 'JsonReader',
 268                                  root: 'data',
 269                                  totalProperty: 'totalCount',
 270                                  id: 'post_id',
 271                                  fields : [
 272                                      'id', 'name'
 273                                  ]
 274                              }
 275                          },
 276                     }
 277                 ]
 278             },
 279
 280
 281
 282             {
 283
 284                 xtype : 'Column',
 285                 width:600,
 286                 labelAlign: 'top',
 287                 items : [
 288                     {
 289                         xtype : 'HtmlEditor',
 290                         name : 'bio',
 291                         fieldLabel:'Biography',
 292                         width:550,
 293                         height:200,
 294                         resizable: 's', /// where the handles should got..
 295                         toolbars : [ 'ToolbarStandard', 'ToolbarContext' ]
 296                     }
 297                 ]
 298             }
 299         ]
 300
 301     });
 302     mform.addButton('Save');
 303     mform.addButton('Cancel');
 304
 305
 306     mform.render('form-ct2');
 307     mform.setValues({
 308         country  : 'AK,LA',
 309         countryNames : 'Alaska,Louisana',
 310         countrylist  : 'AG,AZ',
 311         countrylist_names : 'Antigua and Barbuda,Azerbaijan'
 312     });
 313     /*
 314      * ================  Form 3  =======================
 315      */
 316     var fs = new Roo.form.Form({
 317         labelAlign: 'right',
 318         labelWidth: 80
 319     });
 320
 321     fs.fieldset(
 322         {legend:'Contact Information', style: 'width:320px;' },
 323         new Roo.form.TextField({
 324             fieldLabel: 'First Name',
 325             name: 'first',
 326             width:190
 327         }),
 328
 329         new Roo.form.TextField({
 330             fieldLabel: 'Last Name',
 331             name: 'last',
 332             width:190
 333         }),
 334
 335         new Roo.form.TextField({
 336             fieldLabel: 'Company',
 337             name: 'company',
 338             width:190
 339         }),
 340
 341         new Roo.form.TextField({
 342             fieldLabel: 'Email',
 343             name: 'email',
 344             vtype:'email',
 345             width:190
 346         }),
 347
 348         new Roo.form.ComboBox({
 349             fieldLabel: 'State',
 350             hiddenName:'state',
 351             store: new Roo.data.SimpleStore({
 352                 fields: ['abbr', 'state'],
 353                 data : Roo.exampledata.states // from states.js
 354             }),
 355             displayField:'state',
 356             typeAhead: true,
 357             mode: 'local',
 358             triggerAction: 'all',
 359             emptyText:'Select a state...',
 360             selectOnFocus:true,
 361             width:190
 362         }),
 363
 364         new Roo.form.DateField({
 365             fieldLabel: 'Date of Birth',
 366             name: 'dob',
 367             width:190,
 368             allowBlank:false
 369         }),
 370         new Roo.form.MonthField({
 371             fieldLabel: 'Date of Month',
 372             name: 'dom',
 373             width:190,
 374             allowBlank:false
 375         })
 376     );
 377
 378     fs.addButton('Save');
 379     fs.addButton('Cancel');
 380
 381     fs.render('form-ct3');
 382
 383     /*
 384      * ================  Form 4  =======================
 385      */
 386     var form = new Roo.form.Form({
 387         labelAlign: 'right',
 388         labelWidth: 75
 389     });
 390
 391     form.column({width:342, labelWidth:75}); // open column, without auto close
 392     form.fieldset(
 393         {legend:'Contact Information'},
 394         new Roo.form.TextField({
 395             fieldLabel: 'Full Name',
 396             name: 'fullName',
 397             allowBlank:false,
 398             value: 'Fred Blogs'
 399         }),
 400
 401         new Roo.form.TextField({
 402             fieldLabel: 'Job Title',
 403             name: 'title',
 404             value: 'RooJS user'
 405         }),
 406
 407         new Roo.form.TextField({
 408             fieldLabel: 'Company',
 409             name: 'company',
 410             value: 'RooJS'
 411         }),
 412
 413         new Roo.form.TextArea({
 414             fieldLabel: 'Address',
 415             name: 'address',
 416             grow: true,
 417             preventScrollbars:true,
 418             value: '123 example drive'
 419         })
 420     );
 421     form.fieldset(
 422         {legend:'Phone Numbers'},
 423         new Roo.form.TextField({
 424             fieldLabel: 'Home',
 425             name: 'home',
 426             value: '(123) 456 789'
 427         }),
 428
 429         new Roo.form.TextField({
 430             fieldLabel: 'Business',
 431             name: 'business'
 432         }),
 433
 434         new Roo.form.TextField({
 435             fieldLabel: 'Mobile',
 436             name: 'mobile'
 437         }),
 438
 439         new Roo.form.TextField({
 440             fieldLabel: 'Fax',
 441             name: 'fax'
 442         })
 443     );
 444     form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
 445
 446
 447     form.column(
 448         {width:202, style:'margin-left:10px', clear:true}
 449     );
 450
 451     form.fieldset(
 452         {id:'photo', legend:'Photo'}
 453     );
 454     form.end();
 455
 456     form.fieldset(
 457         {legend:'Options', hideLabels:true},
 458         new Roo.form.Checkbox({
 459             boxLabel:'RooJS v1.1.1',
 460             name:'extuser',
 461             width:'auto'
 462         }),
 463         new Roo.form.Checkbox({
 464             boxLabel:'RooJS v2.0.0',
 465             name:'extcomm',
 466             width:'auto'
 467         }),
 468         new Roo.form.Checkbox({
 469             boxLabel:'RooScript',
 470             name:'extprem',
 471             width:'auto'
 472         })
 473
 474     );
 475
 476     form.end(); // close the column
 477
 478
 479     form.applyIfToFields({
 480         width:230
 481     });
 482
 483     form.addButton('Save');
 484     form.addButton('Cancel');
 485
 486     form.render('form-ct4');
 487
 488     // The form elements are standard HTML elements. By assigning an id (as we did above)
 489     // we can manipulate them like any other element
 490     var photo = Roo.get('photo');
 491     var c = photo.createChild({
 492         tag:'center',
 493         cn: {
 494             tag:'img',
 495             src: 'roojs_icon.jpg',
 496             style:'margin-bottom:5px;'
 497         }
 498     });
 499     new Roo.Button(c, {
 500         text: 'Change Photo'
 501     });
 502
 503    form5 = new Roo.form.Form({
 504         labelAlign: 'left',
 505         labelWidth: 120,
 506         items : [
 507             {
 508
 509                 xtype: 'Checkbox',
 510                 xns : Roo.form,
 511                 fieldLabel: 'A checkbox',
 512                 boxLabel:'RooJS v1.1.1',
 513                 name:'extuser',
 514                 inputValue : '1',
 515                 value : '1',
 516                 width:'auto'
 517             },
 518
 519             {
 520
 521                 xtype: 'Radio',
 522                 xns : Roo.form,
 523                 fieldLabel: 'A test radio box',
 524                 boxLabel:'Test1',
 525                 name:'radiotest',
 526                 inputValue : '1',
 527                 width:'auto'
 528             },
 529               {
 530
 531                 xtype: 'Radio',
 532                 xns : Roo.form,
 533                 fieldLabel: 'A test radio box2',
 534                 boxLabel:'Test1',
 535                 name:'radiotest',
 536                 inputValue : '2',
 537                 checked: true,
 538                 width:'auto'
 539             },
 540             {
 541
 542                 xtype: 'Checkbox',
 543                 xns : Roo.form,
 544                fieldLabel: 'A checkbox',
 545                 boxLabel:'RooJS v1.1.1',
 546                 name:'extuser',
 547                 inputValue : '1',
 548                 value : '1',
 549                 width:'auto'
 550             },
 551
 552
 553             {
 554                 xtype : 'DisplayField',
 555                 xns : Roo.form,
 556                 name:'textex',
 557                 fieldLabel: 'Simple',
 558                 value : 'example text'
 559             } ,
 560             {
 561                 xtype: 'ComboBox',
 562                 xns : Roo.form,
 563                 fieldLabel: 'State',
 564                 hiddenName:'state',
 565                 store: {
 566                     xtype: 'SimpleStore',
 567                     xns : Roo.data,
 568                     fields: ['abbr', 'state'],
 569                     data : Roo.exampledata.states // from states.js
 570                 },
 571                 displayField:'state',
 572                 typeAhead: true,
 573                 mode: 'local',
 574                 triggerAction: 'all',
 575                 emptyText:'Select a state...',
 576                 selectOnFocus:true,
 577                 width:190,
 578                 listeners : {
 579                     add : function()
 580                     {
 581                         Roo.MessageBox.alert("Alert", "Add Pressed");
 582                     },
 583                     edit : function()
 584                     {
 585                         Roo.MessageBox.alert("Alert", "Edit Pressed");
 586                     }
 587
 588                 }
 589             },
 590
 591         ]
 592     });
 593
 594     form5.render('form-ct5');
 595
 596
 597 //    form6 = new Roo.form.Form({
 598 //        labelAlign: 'left',
 599 //        labelWidth: 120,
 600 //        items : [
 601 //            {
 602 //
 603 //                xtype: 'TimePicker',
 604 //                xns : Roo.form,
 605 //                fieldLabel: 'test time picker',
 606 //                name: 'time'
 607 //            },
 608 //            {
 609 //                xtype: 'DateDisplay',
 610 //                xns : Roo.form,
 611 //                fieldLabel: 'test date picker',
 612 //                name: 'date'
 613 //            }
 614 //
 615 //
 616 //        ]
 617 //    });
 618 //
 619 //    form6.render('form-ct6');
 620
 621
 622
 623     /*
 624      * ================ form 7 =======================
 625      */
 626     signature = new Roo.form.Form({
 627         labelWidth: 75, // label settings here cascade unless overridden
 628         url:'save-form.php',
 629         width: 500
 630     });
 631     signature.add(
 632         new Roo.form.Signature({
 633             fieldLabel: 'Signature',
 634             name: 's',
 635             listeners : {
 636                 confirm : function (_self)
 637                 {
 638                     Roo.log(_self.getImageDataURI());
 639                     Roo.log('in confirm');
 640                 }
 641             },
 642             width: 300
 643         })
 644     );
 645 //
 646 //    form7.addButton('Save');
 647 //    form7.addButton('Cancel');
 648
 649     signature.render('form-ct7');
 650
 651
 652
 653
 654
 655 });