docs/source/FieldSet.html

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