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