/** * @class Ext.form.FieldContainer * @extends Ext.container.Container *A container which participates in {@link Ext.layout.component.form.Field field layout}. * This allows grouping of several components with a {@link #fieldLabel field label} and optional * {@link #msgTarget error message}, so that it lines up nicely with other fields in a form. The * {@link #items} of the container will be layed out within the field body area according to the * configured {@link #layout}.
*Like regular fields, FieldContainer can inherit its decoration configuration from the * {@link Ext.form.FormPanel#fieldDefaults fieldDefaults} of an enclosing FormPanel. In addition, * FieldContainer itself can pass {@link #fieldDefaults} to any {@link Ext.form.Labelable fields} * it may itself contain.
*Example usage:
** @constructor * Creates a new Ext.form.FieldContainer instance. * @param {Object} config The component configuration. * * @xtype fieldcontainer */ Ext.define('Ext.form.FieldContainer', { extend: 'Ext.container.Container', mixins: { decoratable: 'Ext.form.Labelable' }, alias: 'widget.fieldcontainer', componentLayout: 'field', /** * @cfg {Object} fieldDefaults *Ext.create('Ext.form.FormPanel', { renderTo: Ext.getBody(), title: 'FieldContainer Examples', width: 600, bodyPadding: 10, items: [{ fieldLabel: 'Panels', xtype: 'fieldcontainer', layout: 'hbox', defaults: { height: 50, flex: 1 }, items: [{ xtype: 'panel', title: 'Panel 1' }, { xtype: 'splitter' }, { xtype: 'panel', title: 'Panel 2' }, { xtype: 'splitter' }, { xtype: 'panel', title: 'Panel 3' }] }] });
If specified, the properties in this object are used as default config values for each * {@link Ext.form.Labelable} instance (e.g. {@link Ext.form.BaseField} or {@link Ext.form.FieldContainer}) * that is added as a descendant of this FieldContainer. Corresponding values specified in an individual field's * own configuration, or from the {@link Ext.lib.Container#defaults defaults config} of its parent container, * will take precedence. See the documentation for {@link Ext.form.Labelable} to see what config * options may be specified in the fieldDefaults.
*Example:
**new Ext.form.FieldContainer({ fieldDefaults: { labelAlign: 'left', labelWidth: 100 }, items: [{ xtype: 'fieldset', defaults: { labelAlign: 'top' }, items: [{ name: 'field1' }, { name: 'field2' }] }, { xtype: 'fieldset', items: [{ name: 'field3', labelWidth: 150 }, { name: 'field4' }] }] });
In this example, field1 and field2 will get labelAlign:'top' (from the fieldset's defaults) * and labelWidth:100 (from fieldDefaults), field3 and field4 will both get labelAlign:'left' (from * fieldDefaults and field3 will use the labelWidth:150 from its own config.
*/ initComponent: function() { var me = this; // Init mixin me.initLabelable(); // Catch addition of descendant fields me.on('add', me.onSubCmpAdded, me); me.callParent(); }, /** * @private * Handle the addition of components to the FieldContainer's child tree, copying the * fieldDefaults to individual fields as necessary. */ onSubCmpAdded: function(parent, child) { var me = this, fieldDefaults = me.fieldDefaults; function handleCmp(cmp) { if (cmp.isFieldLabelable) { cmp.applyFieldDefaults(fieldDefaults); } else if (cmp.isContainer) { cmp.items.each(handleCmp); } } if (fieldDefaults) { handleCmp(child); } }, onRender: function() { var me = this, renderSelectors = me.renderSelectors, applyIf = Ext.applyIf; applyIf(renderSelectors, me.getLabelableSelectors()); me.callParent(arguments); }, initRenderTpl: function() { var me = this; if (!me.hasOwnProperty('renderTpl')) { me.renderTpl = me.labelableRenderTpl; } return me.callParent(); }, initRenderData: function() { return Ext.applyIf(this.callParent(), this.getLabelableRenderData()); }, getTargetEl: function() { return this.bodyEl || this.callParent(); } /* TODO merging fieldDefaults objects down doesn't work due to the order of component addition applyFieldDefaults: function(defaults) { this.getMixin('decoratable').applyFieldDefaults.call(this, defaults); // merge defaults with our own this.fieldDefaults = Ext.apply({}, this.fieldDefaults, defaults); }*/ });