docs/source/FieldSet.html

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