examples/form/dynamic.js

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