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