examples/form/dynamic.js

   1 /*!
   2  * Ext JS Library 3.0.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){
   8
   9     Ext.QuickTips.init();
  10
  11     // turn on validation errors beside the field globally
  12     Ext.form.Field.prototype.msgTarget = 'side';
  13
  14     var bd = Ext.getBody();
  15
  16     /*
  17      * ================  Simple form  =======================
  18      */
  19     bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
  20
  21
  22     var simple = new Ext.FormPanel({
  23         labelWidth: 75, // label settings here cascade unless overridden
  24         url:'save-form.php',
  25         frame:true,
  26         title: 'Simple Form',
  27         bodyStyle:'padding:5px 5px 0',
  28         width: 350,
  29         defaults: {width: 230},
  30         defaultType: 'textfield',
  31
  32         items: [{
  33                 fieldLabel: 'First Name',
  34                 name: 'first',
  35                 allowBlank:false
  36             },{
  37                 fieldLabel: 'Last Name',
  38                 name: 'last'
  39             },{
  40                 fieldLabel: 'Company',
  41                 name: 'company'
  42             }, {
  43                 fieldLabel: 'Email',
  44                 name: 'email',
  45                 vtype:'email'
  46             }, new Ext.form.TimeField({
  47                 fieldLabel: 'Time',
  48                 name: 'time',
  49                 minValue: '8:00am',
  50                 maxValue: '6:00pm'
  51             })
  52         ],
  53
  54         buttons: [{
  55             text: 'Save'
  56         },{
  57             text: 'Cancel'
  58         }]
  59     });
  60
  61     simple.render(document.body);
  62
  63
  64     /*
  65      * ================  Form 2  =======================
  66      */
  67     bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});
  68
  69     var fsf = new Ext.FormPanel({
  70         labelWidth: 75, // label settings here cascade unless overridden
  71         url:'save-form.php',
  72         frame:true,
  73         title: 'Simple Form with FieldSets',
  74         bodyStyle:'padding:5px 5px 0',
  75         width: 350,
  76
  77         items: [{
  78             xtype:'fieldset',
  79             checkboxToggle:true,
  80             title: 'User Information',
  81             autoHeight:true,
  82             defaults: {width: 210},
  83             defaultType: 'textfield',
  84             collapsed: true,
  85             items :[{
  86                     fieldLabel: 'First Name',
  87                     name: 'first',
  88                     allowBlank:false
  89                 },{
  90                     fieldLabel: 'Last Name',
  91                     name: 'last'
  92                 },{
  93                     fieldLabel: 'Company',
  94                     name: 'company'
  95                 }, {
  96                     fieldLabel: 'Email',
  97                     name: 'email',
  98                     vtype:'email'
  99                 }
 100             ]
 101         },{
 102             xtype:'fieldset',
 103             title: 'Phone Number',
 104             collapsible: true,
 105             autoHeight:true,
 106             defaults: {width: 210},
 107             defaultType: 'textfield',
 108             items :[{
 109                     fieldLabel: 'Home',
 110                     name: 'home',
 111                     value: '(888) 555-1212'
 112                 },{
 113                     fieldLabel: 'Business',
 114                     name: 'business'
 115                 },{
 116                     fieldLabel: 'Mobile',
 117                     name: 'mobile'
 118                 },{
 119                     fieldLabel: 'Fax',
 120                     name: 'fax'
 121                 }
 122             ]
 123         }],
 124
 125         buttons: [{
 126             text: 'Save'
 127         },{
 128             text: 'Cancel'
 129         }]
 130     });
 131
 132     fsf.render(document.body);
 133
 134     /*
 135      * ================  Form 3  =======================
 136      */
 137     bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});
 138
 139
 140     var top = new Ext.FormPanel({
 141         labelAlign: 'top',
 142         frame:true,
 143         title: 'Multi Column, Nested Layouts and Anchoring',
 144         bodyStyle:'padding:5px 5px 0',
 145         width: 600,
 146         items: [{
 147             layout:'column',
 148             items:[{
 149                 columnWidth:.5,
 150                 layout: 'form',
 151                 items: [{
 152                     xtype:'textfield',
 153                     fieldLabel: 'First Name',
 154                     name: 'first',
 155                     anchor:'95%'
 156                 }, {
 157                     xtype:'textfield',
 158                     fieldLabel: 'Company',
 159                     name: 'company',
 160                     anchor:'95%'
 161                 }]
 162             },{
 163                 columnWidth:.5,
 164                 layout: 'form',
 165                 items: [{
 166                     xtype:'textfield',
 167                     fieldLabel: 'Last Name',
 168                     name: 'last',
 169                     anchor:'95%'
 170                 },{
 171                     xtype:'textfield',
 172                     fieldLabel: 'Email',
 173                     name: 'email',
 174                     vtype:'email',
 175                     anchor:'95%'
 176                 }]
 177             }]
 178         },{
 179             xtype:'htmleditor',
 180             id:'bio',
 181             fieldLabel:'Biography',
 182             height:200,
 183             anchor:'98%'
 184         }],
 185
 186         buttons: [{
 187             text: 'Save'
 188         },{
 189             text: 'Cancel'
 190         }]
 191     });
 192
 193     top.render(document.body);
 194
 195
 196     /*
 197      * ================  Form 4  =======================
 198      */
 199     bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});
 200
 201
 202
 203     var tabs = new Ext.FormPanel({
 204         labelWidth: 75,
 205         border:false,
 206         width: 350,
 207
 208         items: {
 209             xtype:'tabpanel',
 210             activeTab: 0,
 211             defaults:{autoHeight:true, bodyStyle:'padding:10px'},
 212             items:[{
 213                 title:'Personal Details',
 214                 layout:'form',
 215                 defaults: {width: 230},
 216                 defaultType: 'textfield',
 217
 218                 items: [{
 219                     fieldLabel: 'First Name',
 220                     name: 'first',
 221                     allowBlank:false,
 222                     value: 'Jack'
 223                 },{
 224                     fieldLabel: 'Last Name',
 225                     name: 'last',
 226                     value: 'Slocum'
 227                 },{
 228                     fieldLabel: 'Company',
 229                     name: 'company',
 230                     value: 'Ext JS'
 231                 }, {
 232                     fieldLabel: 'Email',
 233                     name: 'email',
 234                     vtype:'email'
 235                 }]
 236             },{
 237                 title:'Phone Numbers',
 238                 layout:'form',
 239                 defaults: {width: 230},
 240                 defaultType: 'textfield',
 241
 242                 items: [{
 243                     fieldLabel: 'Home',
 244                     name: 'home',
 245                     value: '(888) 555-1212'
 246                 },{
 247                     fieldLabel: 'Business',
 248                     name: 'business'
 249                 },{
 250                     fieldLabel: 'Mobile',
 251                     name: 'mobile'
 252                 },{
 253                     fieldLabel: 'Fax',
 254                     name: 'fax'
 255                 }]
 256             }]
 257         },
 258
 259         buttons: [{
 260             text: 'Save'
 261         },{
 262             text: 'Cancel'
 263         }]
 264     });
 265
 266     tabs.render(document.body);
 267
 268
 269
 270     /*
 271      * ================  Form 5  =======================
 272      */
 273     bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});
 274
 275     var tab2 = new Ext.FormPanel({
 276         labelAlign: 'top',
 277         title: 'Inner Tabs',
 278         bodyStyle:'padding:5px',
 279         width: 600,
 280         items: [{
 281             layout:'column',
 282             border:false,
 283             items:[{
 284                 columnWidth:.5,
 285                 layout: 'form',
 286                 border:false,
 287                 items: [{
 288                     xtype:'textfield',
 289                     fieldLabel: 'First Name',
 290                     name: 'first',
 291                     anchor:'95%'
 292                 }, {
 293                     xtype:'textfield',
 294                     fieldLabel: 'Company',
 295                     name: 'company',
 296                     anchor:'95%'
 297                 }]
 298             },{
 299                 columnWidth:.5,
 300                 layout: 'form',
 301                 border:false,
 302                 items: [{
 303                     xtype:'textfield',
 304                     fieldLabel: 'Last Name',
 305                     name: 'last',
 306                     anchor:'95%'
 307                 },{
 308                     xtype:'textfield',
 309                     fieldLabel: 'Email',
 310                     name: 'email',
 311                     vtype:'email',
 312                     anchor:'95%'
 313                 }]
 314             }]
 315         },{
 316             xtype:'tabpanel',
 317             plain:true,
 318             activeTab: 0,
 319             height:235,
 320             defaults:{bodyStyle:'padding:10px'},
 321             items:[{
 322                 title:'Personal Details',
 323                 layout:'form',
 324                 defaults: {width: 230},
 325                 defaultType: 'textfield',
 326
 327                 items: [{
 328                     fieldLabel: 'First Name',
 329                     name: 'first',
 330                     allowBlank:false,
 331                     value: 'Jack'
 332                 },{
 333                     fieldLabel: 'Last Name',
 334                     name: 'last',
 335                     value: 'Slocum'
 336                 },{
 337                     fieldLabel: 'Company',
 338                     name: 'company',
 339                     value: 'Ext JS'
 340                 }, {
 341                     fieldLabel: 'Email',
 342                     name: 'email',
 343                     vtype:'email'
 344                 }]
 345             },{
 346                 title:'Phone Numbers',
 347                 layout:'form',
 348                 defaults: {width: 230},
 349                 defaultType: 'textfield',
 350
 351                 items: [{
 352                     fieldLabel: 'Home',
 353                     name: 'home',
 354                     value: '(888) 555-1212'
 355                 },{
 356                     fieldLabel: 'Business',
 357                     name: 'business'
 358                 },{
 359                     fieldLabel: 'Mobile',
 360                     name: 'mobile'
 361                 },{
 362                     fieldLabel: 'Fax',
 363                     name: 'fax'
 364                 }]
 365             },{
 366                 cls:'x-plain',
 367                 title:'Biography',
 368                 layout:'fit',
 369                 items: {
 370                     xtype:'htmleditor',
 371                     id:'bio2',
 372                     fieldLabel:'Biography'
 373                 }
 374             }]
 375         }],
 376
 377         buttons: [{
 378             text: 'Save'
 379         },{
 380             text: 'Cancel'
 381         }]
 382     });
 383
 384     tab2.render(document.body);
 385 });