docs/source/FieldSet.html

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