examples/form/dynamic.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.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             /*
 321               By turning off deferred rendering we are guaranteeing that the
 322               form fields within tabs that are not activated will still be rendered.
 323               This is often important when creating multi-tabbed forms.
 324             */
 325             deferredRender: false,
 326             defaults:{bodyStyle:'padding:10px'},
 327             items:[{
 328                 title:'Personal Details',
 329                 layout:'form',
 330                 defaults: {width: 230},
 331                 defaultType: 'textfield',
 332
 333                 items: [{
 334                     fieldLabel: 'First Name',
 335                     name: 'first',
 336                     allowBlank:false,
 337                     value: 'Jack'
 338                 },{
 339                     fieldLabel: 'Last Name',
 340                     name: 'last',
 341                     value: 'Slocum'
 342                 },{
 343                     fieldLabel: 'Company',
 344                     name: 'company',
 345                     value: 'Ext JS'
 346                 }, {
 347                     fieldLabel: 'Email',
 348                     name: 'email',
 349                     vtype:'email'
 350                 }]
 351             },{
 352                 title:'Phone Numbers',
 353                 layout:'form',
 354                 defaults: {width: 230},
 355                 defaultType: 'textfield',
 356
 357                 items: [{
 358                     fieldLabel: 'Home',
 359                     name: 'home',
 360                     value: '(888) 555-1212'
 361                 },{
 362                     fieldLabel: 'Business',
 363                     name: 'business'
 364                 },{
 365                     fieldLabel: 'Mobile',
 366                     name: 'mobile'
 367                 },{
 368                     fieldLabel: 'Fax',
 369                     name: 'fax'
 370                 }]
 371             },{
 372                 cls:'x-plain',
 373                 title:'Biography',
 374                 layout:'fit',
 375                 items: {
 376                     xtype:'htmleditor',
 377                     id:'bio2',
 378                     fieldLabel:'Biography'
 379                 }
 380             }]
 381         }],
 382
 383         buttons: [{
 384             text: 'Save'
 385         },{
 386             text: 'Cancel'
 387         }]
 388     });
 389
 390     tab2.render(document.body);
 391 });