text: /*
   * Ext JS Library 3.0 Pre-alpha
   * Copyright(c) 2006-2008, Ext JS, LLC.
   * licensing@extjs.com
   * 
   * http://extjs.com/license
   */
  
  /**
   * @class Ext.form.FieldSet
   * @extends Ext.Panel
   * Standard container used for grouping items within a {@link Ext.form.FormPanel form}.
   * <pre><code>
  var form = new Ext.FormPanel({
      title: 'Simple Form with FieldSets',
      labelWidth: 75, // label settings here cascade unless overridden
      url: 'save-form.php',
      frame:true,
      bodyStyle:'padding:5px 5px 0',
      width: 700,
      renderTo: document.body,
      layout:'column', // arrange items in columns
      defaults: {      // defaults applied to items
          layout: 'form',
          border: false,
          bodyStyle: 'padding:4px'
      },
      items: [{
          // Fieldset in Column 1
          xtype:'fieldset',
          columnWidth: 0.5,
          title: 'Fieldset 1',
          collapsible: true,
          autoHeight:true,
          defaults: {
              anchor: '-20' // leave room for error icon
          },
          defaultType: 'textfield',
          items :[{
                  fieldLabel: 'Field 1'
              }, {
                  fieldLabel: 'Field 2'
              }, {
                  fieldLabel: 'Field 3'
              }
          ]
      },{
          // Fieldset in Column 2 - Panel inside
          xtype:'fieldset',
          title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
          autoHeight:true,
          columnWidth: 0.5,
          checkboxToggle: true,
          collapsed: true, // fieldset initially collapsed
          layout:'anchor',
          items :[{
              xtype: 'panel',
              anchor: '100%',
              title: 'Panel inside a fieldset',
              frame: true,
              height: 100
          }]
      }]
  });
   * </code></pre>
   * @constructor
   * @param {Object} config Configuration options
   * @xtype fieldset
   */
  Ext.form.FieldSet = Ext.extend(Ext.Panel, {
      /**
       * @cfg {Mixed} checkboxToggle <tt>true</tt> to render a checkbox into the fieldset frame just
       * in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults
       * to <tt>false</tt>).
       * <p>A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox.
       * If <tt>true</tt> is specified, the default DomHelper config object used to create the element
       * is:</p><pre><code>
       * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
       * </code></pre>   
       */
      /**
       * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if <tt>{@link #checkboxToggle} = true</tt>
       * (defaults to <tt>'[checkbox id]-checkbox'</tt>).
       */
      /**
       * @cfg {Boolean} collapsible
       * <tt>true</tt> to make the fieldset collapsible and have the expand/collapse toggle button automatically
       * rendered into the legend element, <tt>false</tt> to keep the fieldset statically sized with no collapse
       * button (defaults to <tt>false</tt>). Another option is to configure <tt>{@link #checkboxToggle}</tt>.
       */
      /**
       * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
       */
      /**
       * @cfg {String} itemCls A css class to apply to the <tt>x-form-item</tt> of fields (see 
       * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details).
       * This property cascades to child containers.
       */
      /**
       * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to <tt>'x-fieldset'</tt>).
       */
      baseCls:'x-fieldset',
      /**
       * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to <tt>'form'</tt>).
       */
      layout: 'form',
      /**
       * @cfg {Boolean} animCollapse
       * <tt>true</tt> to animate the transition when the panel is collapsed, <tt>false</tt> to skip the
       * animation (defaults to <tt>false</tt>).
       */
      animCollapse: false,
  
      // private
      onRender : function(ct, position){
          if(!this.el){
              this.el = document.createElement('fieldset');
              this.el.id = this.id;
              if (this.title || this.header || this.checkboxToggle) {
                  this.el.appendChild(document.createElement('legend')).className = 'x-fieldset-header';
              }
          }
  
          Ext.form.FieldSet.superclass.onRender.call(this, ct, position);
  
          if(this.checkboxToggle){
              var o = typeof this.checkboxToggle == 'object' ?
                      this.checkboxToggle :
                      {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'};
              this.checkbox = this.header.insertFirst(o);
              this.checkbox.dom.checked = !this.collapsed;
              this.mon(this.checkbox, 'click', this.onCheckClick, this);
          }
      },
  
      // private
      onCollapse : function(doAnim, animArg){
          if(this.checkbox){
              this.checkbox.dom.checked = false;
          }
          Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg);
  
      },
  
      // private
      onExpand : function(doAnim, animArg){
          if(this.checkbox){
              this.checkbox.dom.checked = true;
          }
          Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg);
      },
  
      /* //protected
       * This function is called by the fieldset's checkbox when it is toggled (only applies when
       * checkboxToggle = true).  This method should never be called externally, but can be
       * overridden to provide custom behavior when the checkbox is toggled if needed.
       */
      onCheckClick : function(){
          this[this.checkbox.dom.checked ? 'expand' : 'collapse']();
      }
  
      /**
       * @cfg {String/Number} activeItem
       * @hide
       */
      /**
       * @cfg {Mixed} applyTo
       * @hide
       */
      /**
       * @cfg {Object/Array} bbar
       * @hide
       */
      /**
       * @cfg {Boolean} bodyBorder
       * @hide
       */
      /**
       * @cfg {Boolean} border
       * @hide
       */
      /**
       * @cfg {Boolean/Number} bufferResize
       * @hide
       */
      /**
       * @cfg {String} buttonAlign
       * @hide
       */
      /**
       * @cfg {Array} buttons
       * @hide
       */
      /**
       * @cfg {Boolean} collapseFirst
       * @hide
       */
      /**
       * @cfg {String} defaultType
       * @hide
       */
      /**
       * @cfg {String} disabledClass
       * @hide
       */
      /**
       * @cfg {String} elements
       * @hide
       */
      /**
       * @cfg {Boolean} floating
       * @hide
       */
      /**
       * @cfg {Boolean} footer
       * @hide
       */
      /**
       * @cfg {Boolean} frame
       * @hide
       */
      /**
       * @cfg {Boolean} header
       * @hide
       */
      /**
       * @cfg {Boolean} headerAsText
       * @hide
       */
      /**
       * @cfg {Boolean} hideCollapseTool
       * @hide
       */
      /**
       * @cfg {String} iconCls
       * @hide
       */
      /**
       * @cfg {Boolean/String} shadow
       * @hide
       */
      /**
       * @cfg {Number} shadowOffset
       * @hide
       */
      /**
       * @cfg {Boolean} shim
       * @hide
       */
      /**
       * @cfg {Object/Array} tbar
       * @hide
       */
      /**
       * @cfg {String} tabTip
       * @hide
       */
      /**
       * @cfg {Boolean} titleCollapse
       * @hide
       */
      /**
       * @cfg {Array} tools
       * @hide
       */
      /**
       * @cfg {Ext.Template/Ext.XTemplate} toolTemplate
       * @hide
       */
      /**
       * @cfg {String} xtype
       * @hide
       */
      /**
       * @property header
       * @hide
       */
      /**
       * @property footer
       * @hide
       */
      /**
       * @method focus
       * @hide
       */
      /**
       * @method getBottomToolbar
       * @hide
       */
      /**
       * @method getTopToolbar
       * @hide
       */
      /**
       * @method setIconClass
       * @hide
       */
      /**
       * @event activate
       * @hide
       */
      /**
       * @event beforeclose
       * @hide
       */
      /**
       * @event bodyresize
       * @hide
       */
      /**
       * @event close
       * @hide
       */
      /**
       * @event deactivate
       * @hide
       */
  });
  Ext.reg('fieldset', Ext.form.FieldSet);
  
  