ProtoElement.html 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  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">/*
  19. * The dirty implementation in this class is quite naive. The reasoning for this is that the dirty state
  20. * will only be used in very specific circumstances, specifically, after the render process has begun but
  21. * the component is not yet rendered to the DOM. As such, we want it to perform as quickly as possible
  22. * so it's not as fully featured as you may expect.
  23. */
  24. <span id='Ext-util-ProtoElement'>/**
  25. </span> * Manages certain element-like data prior to rendering. These values are passed
  26. * on to the render process. This is currently used to manage the &quot;class&quot; and &quot;style&quot; attributes
  27. * of a component's primary el as well as the bodyEl of panels. This allows things like
  28. * addBodyCls in Panel to share logic with addCls in AbstractComponent.
  29. * @private
  30. */
  31. Ext.define('Ext.util.ProtoElement', (function () {
  32. var splitWords = Ext.String.splitWords,
  33. toMap = Ext.Array.toMap;
  34. return {
  35. isProtoEl: true,
  36. <span id='Ext-util-ProtoElement-property-clsProp'> /**
  37. </span> * The property name for the className on the data object passed to {@link #writeTo}.
  38. */
  39. clsProp: 'cls',
  40. <span id='Ext-util-ProtoElement-property-styleProp'> /**
  41. </span> * The property name for the style on the data object passed to {@link #writeTo}.
  42. */
  43. styleProp: 'style',
  44. <span id='Ext-util-ProtoElement-property-removedProp'> /**
  45. </span> * The property name for the removed classes on the data object passed to {@link #writeTo}.
  46. */
  47. removedProp: 'removed',
  48. <span id='Ext-util-ProtoElement-property-styleIsText'> /**
  49. </span> * True if the style must be converted to text during {@link #writeTo}. When used to
  50. * populate tpl data, this will be true. When used to populate {@link Ext.DomHelper}
  51. * specs, this will be false (the default).
  52. */
  53. styleIsText: false,
  54. constructor: function (config) {
  55. var me = this;
  56. Ext.apply(me, config);
  57. me.classList = splitWords(me.cls);
  58. me.classMap = toMap(me.classList);
  59. delete me.cls;
  60. if (Ext.isFunction(me.style)) {
  61. me.styleFn = me.style;
  62. delete me.style;
  63. } else if (typeof me.style == 'string') {
  64. me.style = Ext.Element.parseStyles(me.style);
  65. } else if (me.style) {
  66. me.style = Ext.apply({}, me.style); // don't edit the given object
  67. }
  68. },
  69. <span id='Ext-util-ProtoElement-method-flush'> /**
  70. </span> * Indicates that the current state of the object has been flushed to the DOM, so we need
  71. * to track any subsequent changes
  72. */
  73. flush: function(){
  74. this.flushClassList = [];
  75. this.removedClasses = {};
  76. // clear the style, it will be recreated if we add anything new
  77. delete this.style;
  78. },
  79. <span id='Ext-util-ProtoElement-method-addCls'> /**
  80. </span> * Adds class to the element.
  81. * @param {String} cls One or more classnames separated with spaces.
  82. * @return {Ext.util.ProtoElement} this
  83. */
  84. addCls: function (cls) {
  85. var me = this,
  86. add = splitWords(cls),
  87. length = add.length,
  88. list = me.classList,
  89. map = me.classMap,
  90. flushList = me.flushClassList,
  91. i = 0,
  92. c;
  93. for (; i &lt; length; ++i) {
  94. c = add[i];
  95. if (!map[c]) {
  96. map[c] = true;
  97. list.push(c);
  98. if (flushList) {
  99. flushList.push(c);
  100. delete me.removedClasses[c];
  101. }
  102. }
  103. }
  104. return me;
  105. },
  106. <span id='Ext-util-ProtoElement-method-hasCls'> /**
  107. </span> * True if the element has given class.
  108. * @param {String} cls
  109. * @return {Boolean}
  110. */
  111. hasCls: function (cls) {
  112. return cls in this.classMap;
  113. },
  114. <span id='Ext-util-ProtoElement-method-removeCls'> /**
  115. </span> * Removes class from the element.
  116. * @param {String} cls One or more classnames separated with spaces.
  117. * @return {Ext.util.ProtoElement} this
  118. */
  119. removeCls: function (cls) {
  120. var me = this,
  121. list = me.classList,
  122. newList = (me.classList = []),
  123. remove = toMap(splitWords(cls)),
  124. length = list.length,
  125. map = me.classMap,
  126. removedClasses = me.removedClasses,
  127. i, c;
  128. for (i = 0; i &lt; length; ++i) {
  129. c = list[i];
  130. if (remove[c]) {
  131. if (removedClasses) {
  132. if (map[c]) {
  133. removedClasses[c] = true;
  134. Ext.Array.remove(me.flushClassList, c);
  135. }
  136. }
  137. delete map[c];
  138. } else {
  139. newList.push(c);
  140. }
  141. }
  142. return me;
  143. },
  144. <span id='Ext-util-ProtoElement-method-setStyle'> /**
  145. </span> * Adds styles to the element.
  146. * @param {String/Object} prop The style property to be set, or an object of multiple styles.
  147. * @param {String} [value] The value to apply to the given property.
  148. * @return {Ext.util.ProtoElement} this
  149. */
  150. setStyle: function (prop, value) {
  151. var me = this,
  152. style = me.style || (me.style = {});
  153. if (typeof prop == 'string') {
  154. if (arguments.length === 1) {
  155. me.setStyle(Ext.Element.parseStyles(prop));
  156. } else {
  157. style[prop] = value;
  158. }
  159. } else {
  160. Ext.apply(style, prop);
  161. }
  162. return me;
  163. },
  164. <span id='Ext-util-ProtoElement-method-writeTo'> /**
  165. </span> * Writes style and class properties to given object.
  166. * Styles will be written to {@link #styleProp} and class names to {@link #clsProp}.
  167. * @param {Object} to
  168. * @return {Object} to
  169. */
  170. writeTo: function (to) {
  171. var me = this,
  172. classList = me.flushClassList || me.classList,
  173. removedClasses = me.removedClasses,
  174. style;
  175. if (me.styleFn) {
  176. style = Ext.apply({}, me.styleFn());
  177. Ext.apply(style, me.style);
  178. } else {
  179. style = me.style;
  180. }
  181. to[me.clsProp] = classList.join(' ');
  182. if (style) {
  183. to[me.styleProp] = me.styleIsText ? Ext.DomHelper.generateStyles(style) : style;
  184. }
  185. if (removedClasses) {
  186. removedClasses = Ext.Object.getKeys(removedClasses);
  187. if (removedClasses.length) {
  188. to[me.removedProp] = removedClasses.join(' ');
  189. }
  190. }
  191. return to;
  192. }
  193. };
  194. }()));
  195. </pre>
  196. </body>
  197. </html>