text: /*!
   * Ext JS Library 3.0.0
   * Copyright(c) 2006-2009 Ext JS, LLC
   * licensing@extjs.com
   * http://www.extjs.com/license
   */
  Ext.onReady(function(){
  
      Ext.QuickTips.init();
  
      // turn on validation errors beside the field globally
      Ext.form.Field.prototype.msgTarget = 'side';
  
      var bd = Ext.getBody();
  
      /*
       * ================  Simple form  =======================
       */
      bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
  
  
      var simple = new Ext.FormPanel({
          labelWidth: 75, // label settings here cascade unless overridden
          url:'save-form.php',
          frame:true,
          title: 'Simple Form',
          bodyStyle:'padding:5px 5px 0',
          width: 350,
          defaults: {width: 230},
          defaultType: 'textfield',
  
          items: [{
                  fieldLabel: 'First Name',
                  name: 'first',
                  allowBlank:false
              },{
                  fieldLabel: 'Last Name',
                  name: 'last'
              },{
                  fieldLabel: 'Company',
                  name: 'company'
              }, {
                  fieldLabel: 'Email',
                  name: 'email',
                  vtype:'email'
              }, new Ext.form.TimeField({
                  fieldLabel: 'Time',
                  name: 'time',
                  minValue: '8:00am',
                  maxValue: '6:00pm'
              })
          ],
  
          buttons: [{
              text: 'Save'
          },{
              text: 'Cancel'
          }]
      });
  
      simple.render(document.body);
  
      
      /*
       * ================  Form 2  =======================
       */
      bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});
  
      var fsf = new Ext.FormPanel({
          labelWidth: 75, // label settings here cascade unless overridden
          url:'save-form.php',
          frame:true,
          title: 'Simple Form with FieldSets',
          bodyStyle:'padding:5px 5px 0',
          width: 350,
  
          items: [{
              xtype:'fieldset',
              checkboxToggle:true,
              title: 'User Information',
              autoHeight:true,
              defaults: {width: 210},
              defaultType: 'textfield',
              collapsed: true,
              items :[{
                      fieldLabel: 'First Name',
                      name: 'first',
                      allowBlank:false
                  },{
                      fieldLabel: 'Last Name',
                      name: 'last'
                  },{
                      fieldLabel: 'Company',
                      name: 'company'
                  }, {
                      fieldLabel: 'Email',
                      name: 'email',
                      vtype:'email'
                  }
              ]
          },{
              xtype:'fieldset',
              title: 'Phone Number',
              collapsible: true,
              autoHeight:true,
              defaults: {width: 210},
              defaultType: 'textfield',
              items :[{
                      fieldLabel: 'Home',
                      name: 'home',
                      value: '(888) 555-1212'
                  },{
                      fieldLabel: 'Business',
                      name: 'business'
                  },{
                      fieldLabel: 'Mobile',
                      name: 'mobile'
                  },{
                      fieldLabel: 'Fax',
                      name: 'fax'
                  }
              ]
          }],
  
          buttons: [{
              text: 'Save'
          },{
              text: 'Cancel'
          }]
      });
  
      fsf.render(document.body);
  
      /*
       * ================  Form 3  =======================
       */
      bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});
  
  
      var top = new Ext.FormPanel({
          labelAlign: 'top',
          frame:true,
          title: 'Multi Column, Nested Layouts and Anchoring',
          bodyStyle:'padding:5px 5px 0',
          width: 600,
          items: [{
              layout:'column',
              items:[{
                  columnWidth:.5,
                  layout: 'form',
                  items: [{
                      xtype:'textfield',
                      fieldLabel: 'First Name',
                      name: 'first',
                      anchor:'95%'
                  }, {
                      xtype:'textfield',
                      fieldLabel: 'Company',
                      name: 'company',
                      anchor:'95%'
                  }]
              },{
                  columnWidth:.5,
                  layout: 'form',
                  items: [{
                      xtype:'textfield',
                      fieldLabel: 'Last Name',
                      name: 'last',
                      anchor:'95%'
                  },{
                      xtype:'textfield',
                      fieldLabel: 'Email',
                      name: 'email',
                      vtype:'email',
                      anchor:'95%'
                  }]
              }]
          },{
              xtype:'htmleditor',
              id:'bio',
              fieldLabel:'Biography',
              height:200,
              anchor:'98%'
          }],
  
          buttons: [{
              text: 'Save'
          },{
              text: 'Cancel'
          }]
      });
  
      top.render(document.body);
  
  
      /*
       * ================  Form 4  =======================
       */
      bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});
  
  
  
      var tabs = new Ext.FormPanel({
          labelWidth: 75,
          border:false,
          width: 350,
  
          items: {
              xtype:'tabpanel',
              activeTab: 0,
              defaults:{autoHeight:true, bodyStyle:'padding:10px'}, 
              items:[{
                  title:'Personal Details',
                  layout:'form',
                  defaults: {width: 230},
                  defaultType: 'textfield',
  
                  items: [{
                      fieldLabel: 'First Name',
                      name: 'first',
                      allowBlank:false,
                      value: 'Jack'
                  },{
                      fieldLabel: 'Last Name',
                      name: 'last',
                      value: 'Slocum'
                  },{
                      fieldLabel: 'Company',
                      name: 'company',
                      value: 'Ext JS'
                  }, {
                      fieldLabel: 'Email',
                      name: 'email',
                      vtype:'email'
                  }]
              },{
                  title:'Phone Numbers',
                  layout:'form',
                  defaults: {width: 230},
                  defaultType: 'textfield',
  
                  items: [{
                      fieldLabel: 'Home',
                      name: 'home',
                      value: '(888) 555-1212'
                  },{
                      fieldLabel: 'Business',
                      name: 'business'
                  },{
                      fieldLabel: 'Mobile',
                      name: 'mobile'
                  },{
                      fieldLabel: 'Fax',
                      name: 'fax'
                  }]
              }]
          },
  
          buttons: [{
              text: 'Save'
          },{
              text: 'Cancel'
          }]
      });
  
      tabs.render(document.body);
  
  
  
      /*
       * ================  Form 5  =======================
       */
      bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});
  
      var tab2 = new Ext.FormPanel({
          labelAlign: 'top',
          title: 'Inner Tabs',
          bodyStyle:'padding:5px',
          width: 600,
          items: [{
              layout:'column',
              border:false,
              items:[{
                  columnWidth:.5,
                  layout: 'form',
                  border:false,
                  items: [{
                      xtype:'textfield',
                      fieldLabel: 'First Name',
                      name: 'first',
                      anchor:'95%'
                  }, {
                      xtype:'textfield',
                      fieldLabel: 'Company',
                      name: 'company',
                      anchor:'95%'
                  }]
              },{
                  columnWidth:.5,
                  layout: 'form',
                  border:false,
                  items: [{
                      xtype:'textfield',
                      fieldLabel: 'Last Name',
                      name: 'last',
                      anchor:'95%'
                  },{
                      xtype:'textfield',
                      fieldLabel: 'Email',
                      name: 'email',
                      vtype:'email',
                      anchor:'95%'
                  }]
              }]
          },{
              xtype:'tabpanel',
              plain:true,
              activeTab: 0,
              height:235,
              defaults:{bodyStyle:'padding:10px'},
              items:[{
                  title:'Personal Details',
                  layout:'form',
                  defaults: {width: 230},
                  defaultType: 'textfield',
  
                  items: [{
                      fieldLabel: 'First Name',
                      name: 'first',
                      allowBlank:false,
                      value: 'Jack'
                  },{
                      fieldLabel: 'Last Name',
                      name: 'last',
                      value: 'Slocum'
                  },{
                      fieldLabel: 'Company',
                      name: 'company',
                      value: 'Ext JS'
                  }, {
                      fieldLabel: 'Email',
                      name: 'email',
                      vtype:'email'
                  }]
              },{
                  title:'Phone Numbers',
                  layout:'form',
                  defaults: {width: 230},
                  defaultType: 'textfield',
  
                  items: [{
                      fieldLabel: 'Home',
                      name: 'home',
                      value: '(888) 555-1212'
                  },{
                      fieldLabel: 'Business',
                      name: 'business'
                  },{
                      fieldLabel: 'Mobile',
                      name: 'mobile'
                  },{
                      fieldLabel: 'Fax',
                      name: 'fax'
                  }]
              },{
                  cls:'x-plain',
                  title:'Biography',
                  layout:'fit',
                  items: {
                      xtype:'htmleditor',
                      id:'bio2',
                      fieldLabel:'Biography'
                  }
              }]
          }],
  
          buttons: [{
              text: 'Save'
          },{
              text: 'Cancel'
          }]
      });
  
      tab2.render(document.body);
  });