source/widgets/form/FieldSet.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /**\r
  10  * @class Ext.form.FieldSet\r
  11  * @extends Ext.Panel\r
  12  * Standard container used for grouping form fields.\r
  13  * @constructor\r
  14  * @param {Object} config Configuration options\r
  15  */\r
  16 Ext.form.FieldSet = Ext.extend(Ext.Panel, {\r
  17     /**\r
  18      * @cfg {Mixed} checkboxToggle True to render a checkbox into the fieldset frame just in front of the legend,\r
  19      * or a DomHelper config object to create the checkbox.  (defaults to false).\r
  20      * The fieldset will be expanded or collapsed when the checkbox is toggled.\r
  21      */\r
  22     /**\r
  23      * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if {@link #checkboxToggle} = true\r
  24      * (defaults to '[checkbox id]-checkbox').\r
  25      */\r
  26     /**\r
  27      * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.\r
  28      */\r
  29     /**\r
  30      * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.\r
  31      */\r
  32     /**\r
  33      * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to 'x-fieldset').\r
  34      */\r
  35     baseCls:'x-fieldset',\r
  36     /**\r
  37      * @cfg {String} layout The {@link Ext.Container#layout} to use inside the fieldset (defaults to 'form').\r
  38      */\r
  39     layout: 'form',\r
  40     /**\r
  41      * @cfg {Boolean} animCollapse\r
  42      * True to animate the transition when the panel is collapsed, false to skip the animation (defaults to false).\r
  43      */\r
  44     animCollapse: false,\r
  45 \r
  46     // private\r
  47     onRender : function(ct, position){\r
  48         if(!this.el){\r
  49             this.el = document.createElement('fieldset');\r
  50             this.el.id = this.id;\r
  51             if (this.title || this.header || this.checkboxToggle) {\r
  52                 this.el.appendChild(document.createElement('legend')).className = 'x-fieldset-header';\r
  53             }\r
  54         }\r
  55 \r
  56         Ext.form.FieldSet.superclass.onRender.call(this, ct, position);\r
  57 \r
  58         if(this.checkboxToggle){\r
  59             var o = typeof this.checkboxToggle == 'object' ?\r
  60                     this.checkboxToggle :\r
  61                     {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'};\r
  62             this.checkbox = this.header.insertFirst(o);\r
  63             this.checkbox.dom.checked = !this.collapsed;\r
  64             this.checkbox.on('click', this.onCheckClick, this);\r
  65         }\r
  66     },\r
  67 \r
  68     // private\r
  69     onCollapse : function(doAnim, animArg){\r
  70         if(this.checkbox){\r
  71             this.checkbox.dom.checked = false;\r
  72         }\r
  73         Ext.form.FieldSet.superclass.onCollapse.call(this, doAnim, animArg);\r
  74 \r
  75     },\r
  76 \r
  77     // private\r
  78     onExpand : function(doAnim, animArg){\r
  79         if(this.checkbox){\r
  80             this.checkbox.dom.checked = true;\r
  81         }\r
  82         Ext.form.FieldSet.superclass.onExpand.call(this, doAnim, animArg);\r
  83     },\r
  84 \r
  85     /* //protected\r
  86      * This function is called by the fieldset's checkbox when it is toggled (only applies when\r
  87      * checkboxToggle = true).  This method should never be called externally, but can be\r
  88      * overridden to provide custom behavior when the checkbox is toggled if needed.\r
  89      */\r
  90     onCheckClick : function(){\r
  91         this[this.checkbox.dom.checked ? 'expand' : 'collapse']();\r
  92     },\r
  93     \r
  94     // private\r
  95     beforeDestroy : function(){\r
  96         if(this.checkbox){\r
  97             this.checkbox.un('click', this.onCheckClick, this);\r
  98         }\r
  99         Ext.form.FieldSet.superclass.beforeDestroy.call(this);\r
 100     }\r
 101 \r
 102     /**\r
 103      * @cfg {String/Number} activeItem\r
 104      * @hide\r
 105      */\r
 106     /**\r
 107      * @cfg {Mixed} applyTo\r
 108      * @hide\r
 109      */\r
 110     /**\r
 111      * @cfg {Object/Array} bbar\r
 112      * @hide\r
 113      */\r
 114     /**\r
 115      * @cfg {Boolean} bodyBorder\r
 116      * @hide\r
 117      */\r
 118     /**\r
 119      * @cfg {Boolean} border\r
 120      * @hide\r
 121      */\r
 122     /**\r
 123      * @cfg {Boolean/Number} bufferResize\r
 124      * @hide\r
 125      */\r
 126     /**\r
 127      * @cfg {String} buttonAlign\r
 128      * @hide\r
 129      */\r
 130     /**\r
 131      * @cfg {Array} buttons\r
 132      * @hide\r
 133      */\r
 134     /**\r
 135      * @cfg {Boolean} collapseFirst\r
 136      * @hide\r
 137      */\r
 138     /**\r
 139      * @cfg {String} defaultType\r
 140      * @hide\r
 141      */\r
 142     /**\r
 143      * @cfg {String} disabledClass\r
 144      * @hide\r
 145      */\r
 146     /**\r
 147      * @cfg {String} elements\r
 148      * @hide\r
 149      */\r
 150     /**\r
 151      * @cfg {Boolean} floating\r
 152      * @hide\r
 153      */\r
 154     /**\r
 155      * @cfg {Boolean} footer\r
 156      * @hide\r
 157      */\r
 158     /**\r
 159      * @cfg {Boolean} frame\r
 160      * @hide\r
 161      */\r
 162     /**\r
 163      * @cfg {Boolean} header\r
 164      * @hide\r
 165      */\r
 166     /**\r
 167      * @cfg {Boolean} headerAsText\r
 168      * @hide\r
 169      */\r
 170     /**\r
 171      * @cfg {Boolean} hideCollapseTool\r
 172      * @hide\r
 173      */\r
 174     /**\r
 175      * @cfg {String} iconCls\r
 176      * @hide\r
 177      */\r
 178     /**\r
 179      * @cfg {Boolean/String} shadow\r
 180      * @hide\r
 181      */\r
 182     /**\r
 183      * @cfg {Number} shadowOffset\r
 184      * @hide\r
 185      */\r
 186     /**\r
 187      * @cfg {Boolean} shim\r
 188      * @hide\r
 189      */\r
 190     /**\r
 191      * @cfg {Object/Array} tbar\r
 192      * @hide\r
 193      */\r
 194     /**\r
 195      * @cfg {Boolean} titleCollapse\r
 196      * @hide\r
 197      */\r
 198     /**\r
 199      * @cfg {Array} tools\r
 200      * @hide\r
 201      */\r
 202     /**\r
 203      * @cfg {String} xtype\r
 204      * @hide\r
 205      */\r
 206     /**\r
 207      * @property header\r
 208      * @hide\r
 209      */\r
 210     /**\r
 211      * @property footer\r
 212      * @hide\r
 213      */\r
 214     /**\r
 215      * @method focus\r
 216      * @hide\r
 217      */\r
 218     /**\r
 219      * @method getBottomToolbar\r
 220      * @hide\r
 221      */\r
 222     /**\r
 223      * @method getTopToolbar\r
 224      * @hide\r
 225      */\r
 226     /**\r
 227      * @method setIconClass\r
 228      * @hide\r
 229      */\r
 230     /**\r
 231      * @event activate\r
 232      * @hide\r
 233      */\r
 234     /**\r
 235      * @event beforeclose\r
 236      * @hide\r
 237      */\r
 238     /**\r
 239      * @event bodyresize\r
 240      * @hide\r
 241      */\r
 242     /**\r
 243      * @event close\r
 244      * @hide\r
 245      */\r
 246     /**\r
 247      * @event deactivate\r
 248      * @hide\r
 249      */\r
 250 });\r
 251 Ext.reg('fieldset', Ext.form.FieldSet);\r
 252 \r