/*!
 * Ext JS Library 3.3.1
 * Copyright(c) 2006-2010 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
/** * @class Ext.form.FieldSet * @extends Ext.Panel * Standard container used for grouping items within a {@link Ext.form.FormPanel form}. *

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
        }]
    }]
});
 * 
* @constructor * @param {Object} config Configuration options * @xtype fieldset */ Ext.form.FieldSet = Ext.extend(Ext.Panel, {
/** * @cfg {Mixed} checkboxToggle true 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 false). *

A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox. * If true is specified, the default DomHelper config object used to create the element * is:


     * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
     * 
*/
/** * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if {@link #checkboxToggle} = true * (defaults to '[checkbox id]-checkbox'). */
/** * @cfg {Boolean} collapsible * true to make the fieldset collapsible and have the expand/collapse toggle button automatically * rendered into the legend element, false to keep the fieldset statically sized with no collapse * button (defaults to false). Another option is to configure {@link #checkboxToggle}. */
/** * @cfg {Number} labelWidth The width of labels. This property cascades to child containers. */
/** * @cfg {String} itemCls A css class to apply to the x-form-item 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 'x-fieldset'). */ baseCls : 'x-fieldset',
/** * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to 'form'). */ layout : 'form',
/** * @cfg {Boolean} animCollapse * true to animate the transition when the panel is collapsed, false to skip the * animation (defaults to false). */ 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 = this.baseCls + '-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); },
/** * 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 {Boolean} bodyBorder * @hide */
/** * @cfg {Boolean} border * @hide */
/** * @cfg {Boolean/Number} bufferResize * @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 {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);