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