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