src/widgets/form/FieldSet.js

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