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