/**
* @class Ext.form.FieldSet
* @extends Ext.container.Container
*
@@ -80,25 +97,25 @@ Ext.define('Ext.form.FieldSet', {
alias: 'widget.fieldset',
uses: ['Ext.form.field.Checkbox', 'Ext.panel.Tool', 'Ext.layout.container.Anchor', 'Ext.layout.component.FieldSet'],
- /**
+ /**
* @cfg {String} title
* A title to be displayed in the fieldset's legend. May contain HTML markup.
*/
- /**
+ /**
* @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}.
*/
- /**
+ /**
* @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>).
*/
- /**
+ /**
* @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
@@ -106,26 +123,26 @@ Ext.define('Ext.form.FieldSet', {
* Use the {@link #collapsed} config to collapse the fieldset by default.
*/
- /**
+ /**
* @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,
- /**
+ /**
* @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.
*/
- /**
+ /**
* @cfg {String} baseCls The base CSS class applied to the fieldset (defaults to <tt>'x-fieldset'</tt>).
*/
baseCls: Ext.baseCSSPrefix + 'fieldset',
- /**
+ /**
* @cfg {String} layout The {@link Ext.container.Container#layout} for the fieldset's immediate child items.
* Defaults to <tt>'anchor'</tt>.
*/
@@ -171,7 +188,7 @@ Ext.define('Ext.form.FieldSet', {
this.initLegend();
},
- /**
+ /**
* @private
* Initialize and render the legend component if necessary
*/
@@ -212,7 +229,7 @@ Ext.define('Ext.form.FieldSet', {
}
},
- /**
+ /**
* @protected
* Creates the legend title component. This is only called internally, but could be overridden in subclasses
* to customize the title component.
@@ -228,14 +245,14 @@ Ext.define('Ext.form.FieldSet', {
},
- /**
+ /**
* @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>.
*/
- /**
+ /**
* @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.
@@ -257,14 +274,14 @@ Ext.define('Ext.form.FieldSet', {
return me.checkboxCmp;
},
- /**
+ /**
* @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>.
*/
- /**
+ /**
* @protected
* Creates the toggle button component. This is only called internally, but could be overridden in
* subclasses to customize the toggle component.
@@ -280,7 +297,7 @@ Ext.define('Ext.form.FieldSet', {
return me.toggleCmp;
},
- /**
+ /**
* Sets the title of this fieldset
* @param {String} title The new title
* @return {Ext.form.FieldSet} this
@@ -301,7 +318,7 @@ Ext.define('Ext.form.FieldSet', {
return this.body;
},
- /**
+ /**
* @private
* Include the legend component in the items for ComponentQuery
*/
@@ -319,7 +336,7 @@ Ext.define('Ext.form.FieldSet', {
return refItems;
},
- /**
+ /**
* Expands the fieldset.
* @return {Ext.form.FieldSet} this
*/
@@ -327,7 +344,7 @@ Ext.define('Ext.form.FieldSet', {
return this.setExpanded(true);
},
- /**
+ /**
* Collapses the fieldset.
* @return {Ext.form.FieldSet} this
*/
@@ -335,13 +352,12 @@ Ext.define('Ext.form.FieldSet', {
return this.setExpanded(false);
},
- /**
+ /**
* @private Collapse or expand the fieldset
*/
setExpanded: function(expanded) {
var me = this,
- checkboxCmp = me.checkboxCmp,
- toggleCmp = me.toggleCmp;
+ checkboxCmp = me.checkboxCmp;
expanded = !!expanded;
@@ -355,18 +371,22 @@ Ext.define('Ext.form.FieldSet', {
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;
},
- /**
+ /**
* Toggle the fieldset's collapsed state to the opposite of what it is currently
*/
toggle: function() {
this.setExpanded(!!this.collapsed);
},
- /**
+ /**
* @private Handle changes in the checkbox checked state
*/
onCheckChange: function(cmp, checked) {
@@ -381,4 +401,6 @@ Ext.define('Ext.form.FieldSet', {
this.callParent();
}
});
-