text: /**
   * This is a layout that will render form Fields, one under the other all stretched to the Container width.
   *
   *     @example
   *     Ext.create('Ext.Panel', {
   *         width: 500,
   *         height: 300,
   *         title: "FormLayout Panel",
   *         layout: 'form',
   *         renderTo: Ext.getBody(),
   *         bodyPadding: 5,
   *         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'
   *         }, {
   *             fieldLabel: 'DOB',
   *             name: 'dob',
   *             xtype: 'datefield'
   *         }, {
   *             fieldLabel: 'Age',
   *             name: 'age',
   *             xtype: 'numberfield',
   *             minValue: 0,
   *             maxValue: 100
   *         }, {
   *             xtype: 'timefield',
   *             fieldLabel: 'Time',
   *             name: 'time',
   *             minValue: '8:00am',
   *             maxValue: '6:00pm'
   *         }]
   *     });
   *
   * Note that any configured {@link Ext.Component#padding padding} will be ignored on items within a Form layout.
   */
  Ext.define('Ext.layout.container.Form', {
  
      /* Begin Definitions */
  
      alias: 'layout.form',
      extend: 'Ext.layout.container.Auto',
      alternateClassName: 'Ext.layout.FormLayout',
  
      /* End Definitions */
     
      tableCls: Ext.baseCSSPrefix + 'form-layout-table',
  
      type: 'form',
      
      createsInnerCt: true,
  
      manageOverflow: 2,
  
      childEls: ['formTable'],
      
      padRow: '<tr><td class="' + Ext.baseCSSPrefix + 'form-item-pad" colspan="3"></td></tr>',
  
      renderTpl: [
          '<table id="{ownerId}-formTable" class="{tableCls}" style="width:100%" cellpadding="0">',
              '{%this.renderBody(out,values)%}',
          '</table>',
          '{%this.renderPadder(out,values)%}'
      ],
      
      getRenderData: function(){
          var data = this.callParent();
          data.tableCls = this.tableCls;
          return data;    
      },
  
      calculate : function (ownerContext) {
          var me = this,
              containerSize = me.getContainerSize(ownerContext, true),
              tableWidth,
              childItems,
              i = 0, length;
  
          // Once we have been widthed, we can impose that width (in a non-dirty setting) upon all children at once
          if (containerSize.gotWidth) {
              this.callParent(arguments);
              tableWidth = me.formTable.dom.offsetWidth;
              childItems = ownerContext.childItems;
  
              for (length = childItems.length; i < length; ++i) {
                  childItems[i].setWidth(tableWidth, false);
              }
          } else {
              me.done = false;
          }
      },
  
      getRenderTarget: function() {
          return this.formTable;
      },
  
      getRenderTree: function() {
          var me = this,
              result = me.callParent(arguments),
              i, len;
  
          for (i = 0, len = result.length; i < len; i++) {
              result[i] = me.transformItemRenderTree(result[i]);
          }
          return result;
      },
  
      transformItemRenderTree: function(item) {
  
          if (item.tag && item.tag == 'table') {
              item.tag = 'tbody';
              delete item.cellspacing;
              delete item.cellpadding;
  
              // IE6 doesn't separate cells nicely to provide input field
              // vertical separation. It also does not support transparent borders
              // which is how the extra 1px is added to the 2px each side cell spacing.
              // So it needs a 5px high pad row.
              if (Ext.isIE6) {
                  item.cn = this.padRow;
              }
  
              return item;
          }
  
          return {
              tag: 'tbody',
              cn: {
                  tag: 'tr',
                  cn: {
                      tag: 'td',
                      colspan: 3,
                      style: 'width:100%',
                      cn: item
                  }
              }
          };
  
      },
  
      isValidParent: function(item, target, position) {
          return true;
      },
  
      isItemShrinkWrap: function(item) {
          return ((item.shrinkWrap === true) ? 3 : item.shrinkWrap||0) & 2;
      },
  
      getItemSizePolicy: function(item) {
          return {
              setsWidth: 1,
              setsHeight: 0
          };
      }
  });
  