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