examples/form/dynamic.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.require([
  16     'Ext.form.*',
  17     'Ext.layout.container.Column',
  18     'Ext.tab.Panel'
  19 ]);
  20
  21
  22 /*!
  23  * Ext JS Library 3.3.1
  24  * Copyright(c) 2006-2010 Sencha Inc.
  25  * licensing@sencha.com
  26  * http://www.sencha.com/license
  27  */
  28 Ext.onReady(function(){
  29
  30     Ext.QuickTips.init();
  31
  32     var bd = Ext.getBody();
  33
  34     /*
  35      * ================  Simple form  =======================
  36      */
  37     bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
  38
  39
  40     var simple = Ext.create('Ext.form.Panel', {
  41         url:'save-form.php',
  42         frame:true,
  43         title: 'Simple Form',
  44         bodyStyle:'padding:5px 5px 0',
  45         width: 350,
  46         fieldDefaults: {
  47             msgTarget: 'side',
  48             labelWidth: 75
  49         },
  50         defaultType: 'textfield',
  51         defaults: {
  52             anchor: '100%'
  53         },
  54
  55         items: [{
  56             fieldLabel: 'First Name',
  57             name: 'first',
  58             allowBlank:false
  59         },{
  60             fieldLabel: 'Last Name',
  61             name: 'last'
  62         },{
  63             fieldLabel: 'Company',
  64             name: 'company'
  65         }, {
  66             fieldLabel: 'Email',
  67             name: 'email',
  68             vtype:'email'
  69         }, {
  70             xtype: 'timefield',
  71             fieldLabel: 'Time',
  72             name: 'time',
  73             minValue: '8:00am',
  74             maxValue: '6:00pm'
  75         }],
  76
  77         buttons: [{
  78             text: 'Save'
  79         },{
  80             text: 'Cancel'
  81         }]
  82     });
  83
  84     simple.render(document.body);
  85
  86
  87     /*
  88      * ================  Form 2  =======================
  89      */
  90     bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});
  91
  92     var fsf = Ext.create('Ext.form.Panel', {
  93         url:'save-form.php',
  94         frame:true,
  95         title: 'Simple Form with FieldSets',
  96         bodyStyle:'padding:5px 5px 0',
  97         width: 350,
  98         fieldDefaults: {
  99             msgTarget: 'side',
 100             labelWidth: 75
 101         },
 102         defaults: {
 103             anchor: '100%'
 104         },
 105
 106         items: [{
 107             xtype:'fieldset',
 108             checkboxToggle:true,
 109             title: 'User Information',
 110             defaultType: 'textfield',
 111             collapsed: true,
 112             layout: 'anchor',
 113             defaults: {
 114                 anchor: '100%'
 115             },
 116             items :[{
 117                 fieldLabel: 'First Name',
 118                 name: 'first',
 119                 allowBlank:false
 120             },{
 121                 fieldLabel: 'Last Name',
 122                 name: 'last'
 123             },{
 124                 fieldLabel: 'Company',
 125                 name: 'company'
 126             }, {
 127                 fieldLabel: 'Email',
 128                 name: 'email',
 129                 vtype:'email'
 130             }]
 131         },{
 132             xtype:'fieldset',
 133             title: 'Phone Number',
 134             collapsible: true,
 135             defaultType: 'textfield',
 136             layout: 'anchor',
 137             defaults: {
 138                 anchor: '100%'
 139             },
 140             items :[{
 141                 fieldLabel: 'Home',
 142                 name: 'home',
 143                 value: '(888) 555-1212'
 144             },{
 145                 fieldLabel: 'Business',
 146                 name: 'business'
 147             },{
 148                 fieldLabel: 'Mobile',
 149                 name: 'mobile'
 150             },{
 151                 fieldLabel: 'Fax',
 152                 name: 'fax'
 153             }]
 154         }],
 155
 156         buttons: [{
 157             text: 'Save'
 158         },{
 159             text: 'Cancel'
 160         }]
 161     });
 162
 163     fsf.render(document.body);
 164
 165     /*
 166      * ================  Form 3  =======================
 167      */
 168     bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});
 169
 170
 171     var top = Ext.create('Ext.form.Panel', {
 172         frame:true,
 173         title: 'Multi Column, Nested Layouts and Anchoring',
 174         bodyStyle:'padding:5px 5px 0',
 175         width: 600,
 176         fieldDefaults: {
 177             labelAlign: 'top',
 178             msgTarget: 'side'
 179         },
 180
 181         items: [{
 182             xtype: 'container',
 183             anchor: '100%',
 184             layout:'column',
 185             items:[{
 186                 xtype: 'container',
 187                 columnWidth:.5,
 188                 layout: 'anchor',
 189                 items: [{
 190                     xtype:'textfield',
 191                     fieldLabel: 'First Name',
 192                     name: 'first',
 193                     anchor:'96%'
 194                 }, {
 195                     xtype:'textfield',
 196                     fieldLabel: 'Company',
 197                     name: 'company',
 198                     anchor:'96%'
 199                 }]
 200             },{
 201                 xtype: 'container',
 202                 columnWidth:.5,
 203                 layout: 'anchor',
 204                 items: [{
 205                     xtype:'textfield',
 206                     fieldLabel: 'Last Name',
 207                     name: 'last',
 208                     anchor:'100%'
 209                 },{
 210                     xtype:'textfield',
 211                     fieldLabel: 'Email',
 212                     name: 'email',
 213                     vtype:'email',
 214                     anchor:'100%'
 215                 }]
 216             }]
 217         }, {
 218             xtype: 'htmleditor',
 219             name: 'bio',
 220             fieldLabel: 'Biography',
 221             height: 200,
 222             anchor: '100%'
 223         }],
 224
 225         buttons: [{
 226             text: 'Save'
 227         },{
 228             text: 'Cancel'
 229         }]
 230     });
 231
 232     top.render(document.body);
 233
 234
 235     /*
 236      * ================  Form 4  =======================
 237      */
 238     bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});
 239
 240
 241
 242     var tabs = Ext.create('Ext.form.Panel', {
 243         width: 350,
 244         border: false,
 245         bodyBorder: false,
 246         fieldDefaults: {
 247             labelWidth: 75,
 248             msgTarget: 'side'
 249         },
 250         defaults: {
 251             anchor: '100%'
 252         },
 253
 254         items: {
 255             xtype:'tabpanel',
 256             activeTab: 0,
 257             defaults:{
 258                 bodyStyle:'padding:10px'
 259             },
 260
 261             items:[{
 262                 title:'Personal Details',
 263                 defaultType: 'textfield',
 264
 265                 items: [{
 266                     fieldLabel: 'First Name',
 267                     name: 'first',
 268                     allowBlank:false,
 269                     value: 'Ed'
 270                 },{
 271                     fieldLabel: 'Last Name',
 272                     name: 'last',
 273                     value: 'Spencer'
 274                 },{
 275                     fieldLabel: 'Company',
 276                     name: 'company',
 277                     value: 'Ext JS'
 278                 }, {
 279                     fieldLabel: 'Email',
 280                     name: 'email',
 281                     vtype:'email'
 282                 }]
 283             },{
 284                 title:'Phone Numbers',
 285                 defaultType: 'textfield',
 286
 287                 items: [{
 288                     fieldLabel: 'Home',
 289                     name: 'home',
 290                     value: '(888) 555-1212'
 291                 },{
 292                     fieldLabel: 'Business',
 293                     name: 'business'
 294                 },{
 295                     fieldLabel: 'Mobile',
 296                     name: 'mobile'
 297                 },{
 298                     fieldLabel: 'Fax',
 299                     name: 'fax'
 300                 }]
 301             }]
 302         },
 303
 304         buttons: [{
 305             text: 'Save'
 306         },{
 307             text: 'Cancel'
 308         }]
 309     });
 310
 311     tabs.render(document.body);
 312
 313
 314
 315     /*
 316      * ================  Form 5  =======================
 317      */
 318     bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});
 319
 320     var tab2 = Ext.create('Ext.form.Panel', {
 321         title: 'Inner Tabs',
 322         bodyStyle:'padding:5px',
 323         width: 600,
 324         fieldDefaults: {
 325             labelAlign: 'top',
 326             msgTarget: 'side'
 327         },
 328         defaults: {
 329             anchor: '100%'
 330         },
 331
 332         items: [{
 333             layout:'column',
 334             border:false,
 335             items:[{
 336                 columnWidth:.5,
 337                 border:false,
 338                 layout: 'anchor',
 339                 defaultType: 'textfield',
 340                 items: [{
 341                     fieldLabel: 'First Name',
 342                     name: 'first',
 343                     anchor:'95%'
 344                 }, {
 345                     fieldLabel: 'Company',
 346                     name: 'company',
 347                     anchor:'95%'
 348                 }]
 349             },{
 350                 columnWidth:.5,
 351                 border:false,
 352                 layout: 'anchor',
 353                 defaultType: 'textfield',
 354                 items: [{
 355                     fieldLabel: 'Last Name',
 356                     name: 'last',
 357                     anchor:'95%'
 358                 },{
 359                     fieldLabel: 'Email',
 360                     name: 'email',
 361                     vtype:'email',
 362                     anchor:'95%'
 363                 }]
 364             }]
 365         },{
 366             xtype:'tabpanel',
 367             plain:true,
 368             activeTab: 0,
 369             height:235,
 370             defaults:{bodyStyle:'padding:10px'},
 371             items:[{
 372                 title:'Personal Details',
 373                 defaults: {width: 230},
 374                 defaultType: 'textfield',
 375
 376                 items: [{
 377                     fieldLabel: 'First Name',
 378                     name: 'first',
 379                     allowBlank:false,
 380                     value: 'Jamie'
 381                 },{
 382                     fieldLabel: 'Last Name',
 383                     name: 'last',
 384                     value: 'Avins'
 385                 },{
 386                     fieldLabel: 'Company',
 387                     name: 'company',
 388                     value: 'Ext JS'
 389                 }, {
 390                     fieldLabel: 'Email',
 391                     name: 'email',
 392                     vtype:'email'
 393                 }]
 394             },{
 395                 title:'Phone Numbers',
 396                 defaults: {width: 230},
 397                 defaultType: 'textfield',
 398
 399                 items: [{
 400                     fieldLabel: 'Home',
 401                     name: 'home',
 402                     value: '(888) 555-1212'
 403                 },{
 404                     fieldLabel: 'Business',
 405                     name: 'business'
 406                 },{
 407                     fieldLabel: 'Mobile',
 408                     name: 'mobile'
 409                 },{
 410                     fieldLabel: 'Fax',
 411                     name: 'fax'
 412                 }]
 413             },{
 414                 cls: 'x-plain',
 415                 title: 'Biography',
 416                 layout: 'fit',
 417                 items: {
 418                     xtype: 'htmleditor',
 419                     name: 'bio2',
 420                     fieldLabel: 'Biography'
 421                 }
 422             }]
 423         }],
 424
 425         buttons: [{
 426             text: 'Save'
 427         },{
 428             text: 'Cancel'
 429         }]
 430     });
 431
 432     tab2.render(document.body);
 433 });
 434
 435
 436