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