examples/form/dynamic.js

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