123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/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-FieldAncestor'>/**
- </span> * A mixin for {@link Ext.container.Container} components that are likely to have form fields in their
- * items subtree. Adds the following capabilities:
- *
- * - Methods for handling the addition and removal of {@link Ext.form.Labelable} and {@link Ext.form.field.Field}
- * instances at any depth within the container.
- * - Events ({@link #fieldvaliditychange} and {@link #fielderrorchange}) for handling changes to the state
- * of individual fields at the container level.
- * - Automatic application of {@link #fieldDefaults} config properties to each field added within the
- * container, to facilitate uniform configuration of all fields.
- *
- * This mixin is primarily for internal use by {@link Ext.form.Panel} and {@link Ext.form.FieldContainer},
- * and should not normally need to be used directly. @docauthor Jason Johnston <jason@sencha.com>
- */
- Ext.define('Ext.form.FieldAncestor', {
- <span id='Ext-form-FieldAncestor-cfg-fieldDefaults'> /**
- </span> * @cfg {Object} fieldDefaults
- * 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.field.Base} or {@link Ext.form.FieldContainer}) that is added as a descendant of
- * this container. Corresponding values specified in an individual field's own configuration, or from the {@link
- * Ext.container.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.Panel({
- * 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.
- */
- <span id='Ext-form-FieldAncestor-method-initFieldAncestor'> /**
- </span> * Initializes the FieldAncestor's state; this must be called from the initComponent method of any components
- * importing this mixin.
- * @protected
- */
- initFieldAncestor: function() {
- var me = this,
- onSubtreeChange = me.onFieldAncestorSubtreeChange;
- me.addEvents(
- <span id='Ext-form-FieldAncestor-event-fieldvaliditychange'> /**
- </span> * @event fieldvaliditychange
- * Fires when the validity state of any one of the {@link Ext.form.field.Field} instances within this
- * container changes.
- * @param {Ext.form.FieldAncestor} this
- * @param {Ext.form.Labelable} The Field instance whose validity changed
- * @param {String} isValid The field's new validity state
- */
- 'fieldvaliditychange',
- <span id='Ext-form-FieldAncestor-event-fielderrorchange'> /**
- </span> * @event fielderrorchange
- * Fires when the active error message is changed for any one of the {@link Ext.form.Labelable} instances
- * within this container.
- * @param {Ext.form.FieldAncestor} this
- * @param {Ext.form.Labelable} The Labelable instance whose active error was changed
- * @param {String} error The active error message
- */
- 'fielderrorchange'
- );
- // Catch addition and removal of descendant fields
- me.on('add', onSubtreeChange, me);
- me.on('remove', onSubtreeChange, me);
- me.initFieldDefaults();
- },
- <span id='Ext-form-FieldAncestor-method-initFieldDefaults'> /**
- </span> * @private Initialize the {@link #fieldDefaults} object
- */
- initFieldDefaults: function() {
- if (!this.fieldDefaults) {
- this.fieldDefaults = {};
- }
- },
- <span id='Ext-form-FieldAncestor-method-onFieldAncestorSubtreeChange'> /**
- </span> * @private
- * Handle the addition and removal of components in the FieldAncestor component's child tree.
- */
- onFieldAncestorSubtreeChange: function(parent, child) {
- var me = this,
- isAdding = !!child.ownerCt;
- function handleCmp(cmp) {
- var isLabelable = cmp.isFieldLabelable,
- isField = cmp.isFormField;
- if (isLabelable || isField) {
- if (isLabelable) {
- me['onLabelable' + (isAdding ? 'Added' : 'Removed')](cmp);
- }
- if (isField) {
- me['onField' + (isAdding ? 'Added' : 'Removed')](cmp);
- }
- }
- else if (cmp.isContainer) {
- Ext.Array.forEach(cmp.getRefItems(), handleCmp);
- }
- }
- handleCmp(child);
- },
- <span id='Ext-form-FieldAncestor-method-onLabelableAdded'> /**
- </span> * Called when a {@link Ext.form.Labelable} instance is added to the container's subtree.
- * @param {Ext.form.Labelable} labelable The instance that was added
- * @protected
- */
- onLabelableAdded: function(labelable) {
- var me = this;
- // buffer slightly to avoid excessive firing while sub-fields are changing en masse
- me.mon(labelable, 'errorchange', me.handleFieldErrorChange, me, {buffer: 10});
- labelable.setFieldDefaults(me.fieldDefaults);
- },
- <span id='Ext-form-FieldAncestor-method-onFieldAdded'> /**
- </span> * Called when a {@link Ext.form.field.Field} instance is added to the container's subtree.
- * @param {Ext.form.field.Field} field The field which was added
- * @protected
- */
- onFieldAdded: function(field) {
- var me = this;
- me.mon(field, 'validitychange', me.handleFieldValidityChange, me);
- },
- <span id='Ext-form-FieldAncestor-method-onLabelableRemoved'> /**
- </span> * Called when a {@link Ext.form.Labelable} instance is removed from the container's subtree.
- * @param {Ext.form.Labelable} labelable The instance that was removed
- * @protected
- */
- onLabelableRemoved: function(labelable) {
- var me = this;
- me.mun(labelable, 'errorchange', me.handleFieldErrorChange, me);
- },
- <span id='Ext-form-FieldAncestor-method-onFieldRemoved'> /**
- </span> * Called when a {@link Ext.form.field.Field} instance is removed from the container's subtree.
- * @param {Ext.form.field.Field} field The field which was removed
- * @protected
- */
- onFieldRemoved: function(field) {
- var me = this;
- me.mun(field, 'validitychange', me.handleFieldValidityChange, me);
- },
- <span id='Ext-form-FieldAncestor-method-handleFieldValidityChange'> /**
- </span> * @private Handle validitychange events on sub-fields; invoke the aggregated event and method
- */
- handleFieldValidityChange: function(field, isValid) {
- var me = this;
- me.fireEvent('fieldvaliditychange', me, field, isValid);
- me.onFieldValidityChange(field, isValid);
- },
- <span id='Ext-form-FieldAncestor-method-handleFieldErrorChange'> /**
- </span> * @private Handle errorchange events on sub-fields; invoke the aggregated event and method
- */
- handleFieldErrorChange: function(labelable, activeError) {
- var me = this;
- me.fireEvent('fielderrorchange', me, labelable, activeError);
- me.onFieldErrorChange(labelable, activeError);
- },
- <span id='Ext-form-FieldAncestor-method-onFieldValidityChange'> /**
- </span> * Fired when the validity of any field within the container changes.
- * @param {Ext.form.field.Field} field The sub-field whose validity changed
- * @param {Boolean} valid The new validity state
- * @protected
- */
- onFieldValidityChange: Ext.emptyFn,
- <span id='Ext-form-FieldAncestor-method-onFieldErrorChange'> /**
- </span> * Fired when the error message of any field within the container changes.
- * @param {Ext.form.Labelable} field The sub-field whose active error changed
- * @param {String} error The new active error message
- * @protected
- */
- onFieldErrorChange: Ext.emptyFn
- });</pre>
- </body>
- </html>
|