-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-form.FieldSet-method-constructor'><span id='Ext-form.FieldSet'>/**
-</span></span> * @class Ext.form.FieldSet
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-form-FieldSet'>/**
+</span> * @class Ext.form.FieldSet
* @extends Ext.container.Container
*
* A container for grouping sets of fields, rendered as a HTML `fieldset` element. The {@link #title}
* }]
* });
*
- * @constructor
- * Create a new FieldSet
- * @param {Object} config Configuration options
- * @xtype fieldset
* @docauthor Jason Johnston <jason@sencha.com>
*/
Ext.define('Ext.form.FieldSet', {
alias: 'widget.fieldset',
uses: ['Ext.form.field.Checkbox', 'Ext.panel.Tool', 'Ext.layout.container.Anchor', 'Ext.layout.component.FieldSet'],
-<span id='Ext-form.FieldSet-cfg-title'> /**
+<span id='Ext-form-FieldSet-cfg-title'> /**
</span> * @cfg {String} title
* A title to be displayed in the fieldset's legend. May contain HTML markup.
*/
-<span id='Ext-form.FieldSet-cfg-checkboxToggle'> /**
+<span id='Ext-form-FieldSet-cfg-checkboxToggle'> /**
</span> * @cfg {Boolean} checkboxToggle
* Set to <tt>true</tt> to render a checkbox into the fieldset frame just
* in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults
* to <tt>false</tt>). This checkbox will be included in form submits using the {@link #checkboxName}.
*/
-<span id='Ext-form.FieldSet-cfg-checkboxName'> /**
+<span id='Ext-form-FieldSet-cfg-checkboxName'> /**
</span> * @cfg {String} checkboxName
* The name to assign to the fieldset's checkbox if <tt>{@link #checkboxToggle} = true</tt>
* (defaults to <tt>'[fieldset id]-checkbox'</tt>).
*/
-<span id='Ext-form.FieldSet-cfg-collapsible'> /**
+<span id='Ext-form-FieldSet-cfg-collapsible'> /**
</span> * @cfg {Boolean} collapsible
* Set to <tt>true</tt> to make the fieldset collapsible and have the expand/collapse toggle button automatically
* rendered into the legend element, <tt>false</tt> to keep the fieldset statically sized with no collapse
* Use the {@link #collapsed} config to collapse the fieldset by default.
*/
-<span id='Ext-form.FieldSet-cfg-collapsed'> /**
+<span id='Ext-form-FieldSet-cfg-collapsed'> /**
</span> * @cfg {Boolean} collapsed
* Set to <tt>true</tt> to render the fieldset as collapsed by default. If {@link #checkboxToggle} is specified,
* the checkbox will also be unchecked by default.
*/
collapsed: false,
-<span id='Ext-form.FieldSet-property-legend'> /**
+<span id='Ext-form-FieldSet-property-legend'> /**
</span> * @property legend
* @type Ext.Component
* The component for the fieldset's legend. Will only be defined if the configuration requires a legend
* to be created, by setting the {@link #title} or {@link #checkboxToggle} options.
*/
-<span id='Ext-form.FieldSet-cfg-baseCls'> /**
+<span id='Ext-form-FieldSet-cfg-baseCls'> /**
</span> * @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to <tt>'x-fieldset'</tt>).
*/
baseCls: Ext.baseCSSPrefix + 'fieldset',
-<span id='Ext-form.FieldSet-cfg-layout'> /**
+<span id='Ext-form-FieldSet-cfg-layout'> /**
</span> * @cfg {String} layout The {@link Ext.container.Container#layout} for the fieldset's immediate child items.
* Defaults to <tt>'anchor'</tt>.
*/
this.initLegend();
},
-<span id='Ext-form.FieldSet-method-initLegend'> /**
+<span id='Ext-form-FieldSet-method-initLegend'> /**
</span> * @private
* Initialize and render the legend component if necessary
*/
}
},
-<span id='Ext-form.FieldSet-method-createTitleCmp'> /**
+<span id='Ext-form-FieldSet-method-createTitleCmp'> /**
</span> * @protected
* Creates the legend title component. This is only called internally, but could be overridden in subclasses
* to customize the title component.
},
-<span id='Ext-form.FieldSet-property-checkboxCmp'> /**
+<span id='Ext-form-FieldSet-property-checkboxCmp'> /**
</span> * @property checkboxCmp
* @type Ext.form.field.Checkbox
* Refers to the {@link Ext.form.field.Checkbox} component that is added next to the title in the legend. Only
* populated if the fieldset is configured with <tt>{@link #checkboxToggle}:true</tt>.
*/
-<span id='Ext-form.FieldSet-method-createCheckboxCmp'> /**
+<span id='Ext-form-FieldSet-method-createCheckboxCmp'> /**
</span> * @protected
* Creates the checkbox component. This is only called internally, but could be overridden in subclasses
* to customize the checkbox's configuration or even return an entirely different component type.
return me.checkboxCmp;
},
-<span id='Ext-form.FieldSet-property-toggleCmp'> /**
+<span id='Ext-form-FieldSet-property-toggleCmp'> /**
</span> * @property toggleCmp
* @type Ext.panel.Tool
* Refers to the {@link Ext.panel.Tool} component that is added as the collapse/expand button next
* to the title in the legend. Only populated if the fieldset is configured with <tt>{@link #collapsible}:true</tt>.
*/
-<span id='Ext-form.FieldSet-method-createToggleCmp'> /**
+<span id='Ext-form-FieldSet-method-createToggleCmp'> /**
</span> * @protected
* Creates the toggle button component. This is only called internally, but could be overridden in
* subclasses to customize the toggle component.
return me.toggleCmp;
},
-<span id='Ext-form.FieldSet-method-setTitle'> /**
+<span id='Ext-form-FieldSet-method-setTitle'> /**
</span> * Sets the title of this fieldset
* @param {String} title The new title
* @return {Ext.form.FieldSet} this
return this.body;
},
-<span id='Ext-form.FieldSet-method-getRefItems'> /**
+<span id='Ext-form-FieldSet-method-getRefItems'> /**
</span> * @private
* Include the legend component in the items for ComponentQuery
*/
return refItems;
},
-<span id='Ext-form.FieldSet-method-expand'> /**
+<span id='Ext-form-FieldSet-method-expand'> /**
</span> * Expands the fieldset.
* @return {Ext.form.FieldSet} this
*/
return this.setExpanded(true);
},
-<span id='Ext-form.FieldSet-method-collapse'> /**
+<span id='Ext-form-FieldSet-method-collapse'> /**
</span> * Collapses the fieldset.
* @return {Ext.form.FieldSet} this
*/
return this.setExpanded(false);
},
-<span id='Ext-form.FieldSet-method-setExpanded'> /**
+<span id='Ext-form-FieldSet-method-setExpanded'> /**
</span> * @private Collapse or expand the fieldset
*/
setExpanded: function(expanded) {
var me = this,
- checkboxCmp = me.checkboxCmp,
- toggleCmp = me.toggleCmp;
+ checkboxCmp = me.checkboxCmp;
expanded = !!expanded;
me.addCls(me.baseCls + '-collapsed');
}
me.collapsed = !expanded;
+ if (expanded) {
+ // ensure subitems will get rendered and layed out when expanding
+ me.getComponentLayout().childrenChanged = true;
+ }
me.doComponentLayout();
return me;
},
-<span id='Ext-form.FieldSet-method-toggle'> /**
+<span id='Ext-form-FieldSet-method-toggle'> /**
</span> * Toggle the fieldset's collapsed state to the opposite of what it is currently
*/
toggle: function() {
this.setExpanded(!!this.collapsed);
},
-<span id='Ext-form.FieldSet-method-onCheckChange'> /**
+<span id='Ext-form-FieldSet-method-onCheckChange'> /**
</span> * @private Handle changes in the checkbox checked state
*/
onCheckChange: function(cmp, checked) {
this.callParent();
}
});
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>