FieldAncestor.html 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-form-FieldAncestor'>/**
  19. </span> * A mixin for {@link Ext.container.Container} components that are likely to have form fields in their
  20. * items subtree. Adds the following capabilities:
  21. *
  22. * - Methods for handling the addition and removal of {@link Ext.form.Labelable} and {@link Ext.form.field.Field}
  23. * instances at any depth within the container.
  24. * - Events ({@link #fieldvaliditychange} and {@link #fielderrorchange}) for handling changes to the state
  25. * of individual fields at the container level.
  26. * - Automatic application of {@link #fieldDefaults} config properties to each field added within the
  27. * container, to facilitate uniform configuration of all fields.
  28. *
  29. * This mixin is primarily for internal use by {@link Ext.form.Panel} and {@link Ext.form.FieldContainer},
  30. * and should not normally need to be used directly. @docauthor Jason Johnston &lt;jason@sencha.com&gt;
  31. */
  32. Ext.define('Ext.form.FieldAncestor', {
  33. <span id='Ext-form-FieldAncestor-cfg-fieldDefaults'> /**
  34. </span> * @cfg {Object} fieldDefaults
  35. * If specified, the properties in this object are used as default config values for each {@link Ext.form.Labelable}
  36. * instance (e.g. {@link Ext.form.field.Base} or {@link Ext.form.FieldContainer}) that is added as a descendant of
  37. * this container. Corresponding values specified in an individual field's own configuration, or from the {@link
  38. * Ext.container.Container#defaults defaults config} of its parent container, will take precedence. See the
  39. * documentation for {@link Ext.form.Labelable} to see what config options may be specified in the fieldDefaults.
  40. *
  41. * Example:
  42. *
  43. * new Ext.form.Panel({
  44. * fieldDefaults: {
  45. * labelAlign: 'left',
  46. * labelWidth: 100
  47. * },
  48. * items: [{
  49. * xtype: 'fieldset',
  50. * defaults: {
  51. * labelAlign: 'top'
  52. * },
  53. * items: [{
  54. * name: 'field1'
  55. * }, {
  56. * name: 'field2'
  57. * }]
  58. * }, {
  59. * xtype: 'fieldset',
  60. * items: [{
  61. * name: 'field3',
  62. * labelWidth: 150
  63. * }, {
  64. * name: 'field4'
  65. * }]
  66. * }]
  67. * });
  68. *
  69. * In this example, field1 and field2 will get labelAlign:'top' (from the fieldset's defaults) and labelWidth:100
  70. * (from fieldDefaults), field3 and field4 will both get labelAlign:'left' (from fieldDefaults and field3 will use
  71. * the labelWidth:150 from its own config.
  72. */
  73. <span id='Ext-form-FieldAncestor-method-initFieldAncestor'> /**
  74. </span> * Initializes the FieldAncestor's state; this must be called from the initComponent method of any components
  75. * importing this mixin.
  76. * @protected
  77. */
  78. initFieldAncestor: function() {
  79. var me = this,
  80. onSubtreeChange = me.onFieldAncestorSubtreeChange;
  81. me.addEvents(
  82. <span id='Ext-form-FieldAncestor-event-fieldvaliditychange'> /**
  83. </span> * @event fieldvaliditychange
  84. * Fires when the validity state of any one of the {@link Ext.form.field.Field} instances within this
  85. * container changes.
  86. * @param {Ext.form.FieldAncestor} this
  87. * @param {Ext.form.Labelable} The Field instance whose validity changed
  88. * @param {String} isValid The field's new validity state
  89. */
  90. 'fieldvaliditychange',
  91. <span id='Ext-form-FieldAncestor-event-fielderrorchange'> /**
  92. </span> * @event fielderrorchange
  93. * Fires when the active error message is changed for any one of the {@link Ext.form.Labelable} instances
  94. * within this container.
  95. * @param {Ext.form.FieldAncestor} this
  96. * @param {Ext.form.Labelable} The Labelable instance whose active error was changed
  97. * @param {String} error The active error message
  98. */
  99. 'fielderrorchange'
  100. );
  101. // Catch addition and removal of descendant fields
  102. me.on('add', onSubtreeChange, me);
  103. me.on('remove', onSubtreeChange, me);
  104. me.initFieldDefaults();
  105. },
  106. <span id='Ext-form-FieldAncestor-method-initFieldDefaults'> /**
  107. </span> * @private Initialize the {@link #fieldDefaults} object
  108. */
  109. initFieldDefaults: function() {
  110. if (!this.fieldDefaults) {
  111. this.fieldDefaults = {};
  112. }
  113. },
  114. <span id='Ext-form-FieldAncestor-method-onFieldAncestorSubtreeChange'> /**
  115. </span> * @private
  116. * Handle the addition and removal of components in the FieldAncestor component's child tree.
  117. */
  118. onFieldAncestorSubtreeChange: function(parent, child) {
  119. var me = this,
  120. isAdding = !!child.ownerCt;
  121. function handleCmp(cmp) {
  122. var isLabelable = cmp.isFieldLabelable,
  123. isField = cmp.isFormField;
  124. if (isLabelable || isField) {
  125. if (isLabelable) {
  126. me['onLabelable' + (isAdding ? 'Added' : 'Removed')](cmp);
  127. }
  128. if (isField) {
  129. me['onField' + (isAdding ? 'Added' : 'Removed')](cmp);
  130. }
  131. }
  132. else if (cmp.isContainer) {
  133. Ext.Array.forEach(cmp.getRefItems(), handleCmp);
  134. }
  135. }
  136. handleCmp(child);
  137. },
  138. <span id='Ext-form-FieldAncestor-method-onLabelableAdded'> /**
  139. </span> * Called when a {@link Ext.form.Labelable} instance is added to the container's subtree.
  140. * @param {Ext.form.Labelable} labelable The instance that was added
  141. * @protected
  142. */
  143. onLabelableAdded: function(labelable) {
  144. var me = this;
  145. // buffer slightly to avoid excessive firing while sub-fields are changing en masse
  146. me.mon(labelable, 'errorchange', me.handleFieldErrorChange, me, {buffer: 10});
  147. labelable.setFieldDefaults(me.fieldDefaults);
  148. },
  149. <span id='Ext-form-FieldAncestor-method-onFieldAdded'> /**
  150. </span> * Called when a {@link Ext.form.field.Field} instance is added to the container's subtree.
  151. * @param {Ext.form.field.Field} field The field which was added
  152. * @protected
  153. */
  154. onFieldAdded: function(field) {
  155. var me = this;
  156. me.mon(field, 'validitychange', me.handleFieldValidityChange, me);
  157. },
  158. <span id='Ext-form-FieldAncestor-method-onLabelableRemoved'> /**
  159. </span> * Called when a {@link Ext.form.Labelable} instance is removed from the container's subtree.
  160. * @param {Ext.form.Labelable} labelable The instance that was removed
  161. * @protected
  162. */
  163. onLabelableRemoved: function(labelable) {
  164. var me = this;
  165. me.mun(labelable, 'errorchange', me.handleFieldErrorChange, me);
  166. },
  167. <span id='Ext-form-FieldAncestor-method-onFieldRemoved'> /**
  168. </span> * Called when a {@link Ext.form.field.Field} instance is removed from the container's subtree.
  169. * @param {Ext.form.field.Field} field The field which was removed
  170. * @protected
  171. */
  172. onFieldRemoved: function(field) {
  173. var me = this;
  174. me.mun(field, 'validitychange', me.handleFieldValidityChange, me);
  175. },
  176. <span id='Ext-form-FieldAncestor-method-handleFieldValidityChange'> /**
  177. </span> * @private Handle validitychange events on sub-fields; invoke the aggregated event and method
  178. */
  179. handleFieldValidityChange: function(field, isValid) {
  180. var me = this;
  181. me.fireEvent('fieldvaliditychange', me, field, isValid);
  182. me.onFieldValidityChange(field, isValid);
  183. },
  184. <span id='Ext-form-FieldAncestor-method-handleFieldErrorChange'> /**
  185. </span> * @private Handle errorchange events on sub-fields; invoke the aggregated event and method
  186. */
  187. handleFieldErrorChange: function(labelable, activeError) {
  188. var me = this;
  189. me.fireEvent('fielderrorchange', me, labelable, activeError);
  190. me.onFieldErrorChange(labelable, activeError);
  191. },
  192. <span id='Ext-form-FieldAncestor-method-onFieldValidityChange'> /**
  193. </span> * Fired when the validity of any field within the container changes.
  194. * @param {Ext.form.field.Field} field The sub-field whose validity changed
  195. * @param {Boolean} valid The new validity state
  196. * @protected
  197. */
  198. onFieldValidityChange: Ext.emptyFn,
  199. <span id='Ext-form-FieldAncestor-method-onFieldErrorChange'> /**
  200. </span> * Fired when the error message of any field within the container changes.
  201. * @param {Ext.form.Labelable} field The sub-field whose active error changed
  202. * @param {String} error The new active error message
  203. * @protected
  204. */
  205. onFieldErrorChange: Ext.emptyFn
  206. });</pre>
  207. </body>
  208. </html>