docs/source/FieldSet.html

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