src/widgets/form/FieldSet.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 /**
   8  * @class Ext.form.FieldSet
   9  * @extends Ext.Panel
  10  * Standard container used for grouping items within a {@link Ext.form.FormPanel form}.
  11  * <pre><code>
  12 var form = new Ext.FormPanel({
  13     title: 'Simple Form with FieldSets',
  14     labelWidth: 75, // label settings here cascade unless overridden
  15     url: 'save-form.php',
  16     frame:true,
  17     bodyStyle:'padding:5px 5px 0',
  18     width: 700,
  19     renderTo: document.body,
  20     layout:'column', // arrange items in columns
  21     defaults: {      // defaults applied to items
  22         layout: 'form',
  23         border: false,
  24         bodyStyle: 'padding:4px'
  25     },
  26     items: [{
  27         // Fieldset in Column 1
  28         xtype:'fieldset',
  29         columnWidth: 0.5,
  30         title: 'Fieldset 1',
  31         collapsible: true,
  32         autoHeight:true,
  33         defaults: {
  34             anchor: '-20' // leave room for error icon
  35         },
  36         defaultType: 'textfield',
  37         items :[{
  38                 fieldLabel: 'Field 1'
  39             }, {
  40                 fieldLabel: 'Field 2'
  41             }, {
  42                 fieldLabel: 'Field 3'
  43             }
  44         ]
  45     },{
  46         // Fieldset in Column 2 - Panel inside
  47         xtype:'fieldset',
  48         title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
  49         autoHeight:true,
  50         columnWidth: 0.5,
  51         checkboxToggle: true,
  52         collapsed: true, // fieldset initially collapsed
  53         layout:'anchor',
  54         items :[{
  55             xtype: 'panel',
  56             anchor: '100%',
  57             title: 'Panel inside a fieldset',
  58             frame: true,
  59             height: 100
  60         }]
  61     }]
  62 });
  63  * </code></pre>
  64  * @constructor
  65  * @param {Object} config Configuration options
  66  * @xtype fieldset
  67  */
  68 Ext.form.FieldSet = Ext.extend(Ext.Panel, {
  69     /**
  70      * @cfg {Mixed} checkboxToggle <tt>true</tt> to render a checkbox into the fieldset frame just
  71      * in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults
  72      * to <tt>false</tt>).
  73      * <p>A {@link Ext.DomHelper DomHelper} element spec may also be specified to create the checkbox.
  74      * If <tt>true</tt> is specified, the default DomHelper config object used to create the element
  75      * is:</p><pre><code>
  76      * {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
  77      * </code></pre>
  78      */
  79     /**
  80      * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if <tt>{@link #checkboxToggle} = true</tt>
  81      * (defaults to <tt>'[checkbox id]-checkbox'</tt>).
  82      */
  83     /**
  84      * @cfg {Boolean} collapsible
  85      * <tt>true</tt> to make the fieldset collapsible and have the expand/collapse toggle button automatically
  86      * rendered into the legend element, <tt>false</tt> to keep the fieldset statically sized with no collapse
  87      * button (defaults to <tt>false</tt>). Another option is to configure <tt>{@link #checkboxToggle}</tt>.
  88      */
  89     /**
  90      * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
  91      */
  92     /**
  93      * @cfg {String} itemCls A css class to apply to the <tt>x-form-item</tt> of fields (see
  94      * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details).
  95      * This property cascades to child containers.
  96      */
  97     /**
  98      * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to <tt>'x-fieldset'</tt>).
  99      */
 100     baseCls : 'x-fieldset',
 101     /**
 102      * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to <tt>'form'</tt>).
 103      */
 104     layout : 'form',
 105     /**
 106      * @cfg {Boolean} animCollapse
 107      * <tt>true</tt> to animate the transition when the panel is collapsed, <tt>false</tt> to skip the
 108      * animation (defaults to <tt>false</tt>).
 109      */
 110     animCollapse : false,
 111
 112     // private
 113     onRender : function(ct, position){
 114         if(!this.el){
 115             this.el = document.createElement('fieldset');
 116             this.el.id = this.id;
 117             if (this.title || this.header || this.checkboxToggle) {
 118                 this.el.appendChild(document.createElement('legend')).className = this.baseCls + '-header';
 119             }
 120         }
 121
 122         Ext.form.FieldSet.superclass.onRender.call(this, ct, position);
 123
 124         if(this.checkboxToggle){
 125             var o = typeof this.checkboxToggle == 'object' ?
 126                     this.checkboxToggle :
 127                     {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'};
 128             this.checkbox = this.header.insertFirst(o);
 129             this.checkbox.dom.checked = !this.collapsed;
 130             this.mon(this.checkbox, 'click', this.onCheckClick, this);
 131         }
 132     },
 133
 134     // private
 135     onCollapse : function(doAnim, animArg){
 136         if(this.checkbox){
 137             this.checkbox.dom.checked = false;
 138         }
 139         Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg);
 140
 141     },
 142
 143     // private
 144     onExpand : function(doAnim, animArg){
 145         if(this.checkbox){
 146             this.checkbox.dom.checked = true;
 147         }
 148         Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg);
 149     },
 150
 151     /**
 152      * This function is called by the fieldset's checkbox when it is toggled (only applies when
 153      * checkboxToggle = true).  This method should never be called externally, but can be
 154      * overridden to provide custom behavior when the checkbox is toggled if needed.
 155      */
 156     onCheckClick : function(){
 157         this[this.checkbox.dom.checked ? 'expand' : 'collapse']();
 158     }
 159
 160     /**
 161      * @cfg {String/Number} activeItem
 162      * @hide
 163      */
 164     /**
 165      * @cfg {Mixed} applyTo
 166      * @hide
 167      */
 168     /**
 169      * @cfg {Boolean} bodyBorder
 170      * @hide
 171      */
 172     /**
 173      * @cfg {Boolean} border
 174      * @hide
 175      */
 176     /**
 177      * @cfg {Boolean/Number} bufferResize
 178      * @hide
 179      */
 180     /**
 181      * @cfg {Boolean} collapseFirst
 182      * @hide
 183      */
 184     /**
 185      * @cfg {String} defaultType
 186      * @hide
 187      */
 188     /**
 189      * @cfg {String} disabledClass
 190      * @hide
 191      */
 192     /**
 193      * @cfg {String} elements
 194      * @hide
 195      */
 196     /**
 197      * @cfg {Boolean} floating
 198      * @hide
 199      */
 200     /**
 201      * @cfg {Boolean} footer
 202      * @hide
 203      */
 204     /**
 205      * @cfg {Boolean} frame
 206      * @hide
 207      */
 208     /**
 209      * @cfg {Boolean} header
 210      * @hide
 211      */
 212     /**
 213      * @cfg {Boolean} headerAsText
 214      * @hide
 215      */
 216     /**
 217      * @cfg {Boolean} hideCollapseTool
 218      * @hide
 219      */
 220     /**
 221      * @cfg {String} iconCls
 222      * @hide
 223      */
 224     /**
 225      * @cfg {Boolean/String} shadow
 226      * @hide
 227      */
 228     /**
 229      * @cfg {Number} shadowOffset
 230      * @hide
 231      */
 232     /**
 233      * @cfg {Boolean} shim
 234      * @hide
 235      */
 236     /**
 237      * @cfg {Object/Array} tbar
 238      * @hide
 239      */
 240     /**
 241      * @cfg {Array} tools
 242      * @hide
 243      */
 244     /**
 245      * @cfg {Ext.Template/Ext.XTemplate} toolTemplate
 246      * @hide
 247      */
 248     /**
 249      * @cfg {String} xtype
 250      * @hide
 251      */
 252     /**
 253      * @property header
 254      * @hide
 255      */
 256     /**
 257      * @property footer
 258      * @hide
 259      */
 260     /**
 261      * @method focus
 262      * @hide
 263      */
 264     /**
 265      * @method getBottomToolbar
 266      * @hide
 267      */
 268     /**
 269      * @method getTopToolbar
 270      * @hide
 271      */
 272     /**
 273      * @method setIconClass
 274      * @hide
 275      */
 276     /**
 277      * @event activate
 278      * @hide
 279      */
 280     /**
 281      * @event beforeclose
 282      * @hide
 283      */
 284     /**
 285      * @event bodyresize
 286      * @hide
 287      */
 288     /**
 289      * @event close
 290      * @hide
 291      */
 292     /**
 293      * @event deactivate
 294      * @hide
 295      */
 296 });
 297 Ext.reg('fieldset', Ext.form.FieldSet);