docs/source/dynamic.html

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