AbstractElement.traversal.html 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  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-dom-AbstractElement'>/**
  19. </span> * @class Ext.dom.AbstractElement
  20. */
  21. Ext.dom.AbstractElement.override({
  22. <span id='Ext-dom-AbstractElement-method-findParent'> /**
  23. </span> * Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
  24. * @param {String} selector The simple selector to test
  25. * @param {Number/String/HTMLElement/Ext.Element} [limit]
  26. * The max depth to search as a number or an element which causes the upward traversal to stop
  27. * and is &lt;b&gt;not&lt;/b&gt; considered for inclusion as the result. (defaults to 50 || document.documentElement)
  28. * @param {Boolean} [returnEl=false] True to return a Ext.Element object instead of DOM node
  29. * @return {HTMLElement} The matching DOM node (or null if no match was found)
  30. */
  31. findParent: function(simpleSelector, limit, returnEl) {
  32. var target = this.dom,
  33. topmost = document.documentElement,
  34. depth = 0,
  35. stopEl;
  36. limit = limit || 50;
  37. if (isNaN(limit)) {
  38. stopEl = Ext.getDom(limit);
  39. limit = Number.MAX_VALUE;
  40. }
  41. while (target &amp;&amp; target.nodeType == 1 &amp;&amp; depth &lt; limit &amp;&amp; target != topmost &amp;&amp; target != stopEl) {
  42. if (Ext.DomQuery.is(target, simpleSelector)) {
  43. return returnEl ? Ext.get(target) : target;
  44. }
  45. depth++;
  46. target = target.parentNode;
  47. }
  48. return null;
  49. },
  50. <span id='Ext-dom-AbstractElement-method-findParentNode'> /**
  51. </span> * Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
  52. * @param {String} selector The simple selector to test
  53. * @param {Number/String/HTMLElement/Ext.Element} [limit]
  54. * The max depth to search as a number or an element which causes the upward traversal to stop
  55. * and is &lt;b&gt;not&lt;/b&gt; considered for inclusion as the result. (defaults to 50 || document.documentElement)
  56. * @param {Boolean} [returnEl=false] True to return a Ext.Element object instead of DOM node
  57. * @return {HTMLElement} The matching DOM node (or null if no match was found)
  58. */
  59. findParentNode: function(simpleSelector, limit, returnEl) {
  60. var p = Ext.fly(this.dom.parentNode, '_internal');
  61. return p ? p.findParent(simpleSelector, limit, returnEl) : null;
  62. },
  63. <span id='Ext-dom-AbstractElement-method-up'> /**
  64. </span> * Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
  65. * This is a shortcut for findParentNode() that always returns an Ext.dom.Element.
  66. * @param {String} selector The simple selector to test
  67. * @param {Number/String/HTMLElement/Ext.Element} [limit]
  68. * The max depth to search as a number or an element which causes the upward traversal to stop
  69. * and is &lt;b&gt;not&lt;/b&gt; considered for inclusion as the result. (defaults to 50 || document.documentElement)
  70. * @return {Ext.Element} The matching DOM node (or null if no match was found)
  71. */
  72. up: function(simpleSelector, limit) {
  73. return this.findParentNode(simpleSelector, limit, true);
  74. },
  75. <span id='Ext-dom-AbstractElement-method-select'> /**
  76. </span> * Creates a {@link Ext.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
  77. * @param {String} selector The CSS selector
  78. * @param {Boolean} [unique] True to create a unique Ext.Element for each element. Defaults to a shared flyweight object.
  79. * @return {Ext.CompositeElement} The composite element
  80. */
  81. select: function(selector, composite) {
  82. return Ext.dom.Element.select(selector, this.dom, composite);
  83. },
  84. <span id='Ext-dom-AbstractElement-method-query'> /**
  85. </span> * Selects child nodes based on the passed CSS selector (the selector should not contain an id).
  86. * @param {String} selector The CSS selector
  87. * @return {HTMLElement[]} An array of the matched nodes
  88. */
  89. query: function(selector) {
  90. return Ext.DomQuery.select(selector, this.dom);
  91. },
  92. <span id='Ext-dom-AbstractElement-method-down'> /**
  93. </span> * Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
  94. * @param {String} selector The CSS selector
  95. * @param {Boolean} [returnDom=false] True to return the DOM node instead of Ext.dom.Element
  96. * @return {HTMLElement/Ext.dom.Element} The child Ext.dom.Element (or DOM node if returnDom = true)
  97. */
  98. down: function(selector, returnDom) {
  99. var n = Ext.DomQuery.selectNode(selector, this.dom);
  100. return returnDom ? n : Ext.get(n);
  101. },
  102. <span id='Ext-dom-AbstractElement-method-child'> /**
  103. </span> * Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).
  104. * @param {String} selector The CSS selector
  105. * @param {Boolean} [returnDom=false] True to return the DOM node instead of Ext.dom.Element.
  106. * @return {HTMLElement/Ext.dom.Element} The child Ext.dom.Element (or DOM node if returnDom = true)
  107. */
  108. child: function(selector, returnDom) {
  109. var node,
  110. me = this,
  111. id;
  112. // Pull the ID from the DOM (Ext.id also ensures that there *is* an ID).
  113. // If this object is a Flyweight, it will not have an ID
  114. id = Ext.id(me.dom);
  115. // Escape &quot;invalid&quot; chars
  116. id = Ext.escapeId(id);
  117. node = Ext.DomQuery.selectNode('#' + id + &quot; &gt; &quot; + selector, me.dom);
  118. return returnDom ? node : Ext.get(node);
  119. },
  120. <span id='Ext-dom-AbstractElement-method-parent'> /**
  121. </span> * Gets the parent node for this element, optionally chaining up trying to match a selector
  122. * @param {String} [selector] Find a parent node that matches the passed simple selector
  123. * @param {Boolean} [returnDom=false] True to return a raw dom node instead of an Ext.dom.Element
  124. * @return {Ext.dom.Element/HTMLElement} The parent node or null
  125. */
  126. parent: function(selector, returnDom) {
  127. return this.matchNode('parentNode', 'parentNode', selector, returnDom);
  128. },
  129. <span id='Ext-dom-AbstractElement-method-next'> /**
  130. </span> * Gets the next sibling, skipping text nodes
  131. * @param {String} [selector] Find the next sibling that matches the passed simple selector
  132. * @param {Boolean} [returnDom=false] True to return a raw dom node instead of an Ext.dom.Element
  133. * @return {Ext.dom.Element/HTMLElement} The next sibling or null
  134. */
  135. next: function(selector, returnDom) {
  136. return this.matchNode('nextSibling', 'nextSibling', selector, returnDom);
  137. },
  138. <span id='Ext-dom-AbstractElement-method-prev'> /**
  139. </span> * Gets the previous sibling, skipping text nodes
  140. * @param {String} [selector] Find the previous sibling that matches the passed simple selector
  141. * @param {Boolean} [returnDom=false] True to return a raw dom node instead of an Ext.dom.Element
  142. * @return {Ext.dom.Element/HTMLElement} The previous sibling or null
  143. */
  144. prev: function(selector, returnDom) {
  145. return this.matchNode('previousSibling', 'previousSibling', selector, returnDom);
  146. },
  147. <span id='Ext-dom-AbstractElement-method-first'> /**
  148. </span> * Gets the first child, skipping text nodes
  149. * @param {String} [selector] Find the next sibling that matches the passed simple selector
  150. * @param {Boolean} [returnDom=false] True to return a raw dom node instead of an Ext.dom.Element
  151. * @return {Ext.dom.Element/HTMLElement} The first child or null
  152. */
  153. first: function(selector, returnDom) {
  154. return this.matchNode('nextSibling', 'firstChild', selector, returnDom);
  155. },
  156. <span id='Ext-dom-AbstractElement-method-last'> /**
  157. </span> * Gets the last child, skipping text nodes
  158. * @param {String} [selector] Find the previous sibling that matches the passed simple selector
  159. * @param {Boolean} [returnDom=false] True to return a raw dom node instead of an Ext.dom.Element
  160. * @return {Ext.dom.Element/HTMLElement} The last child or null
  161. */
  162. last: function(selector, returnDom) {
  163. return this.matchNode('previousSibling', 'lastChild', selector, returnDom);
  164. },
  165. matchNode: function(dir, start, selector, returnDom) {
  166. if (!this.dom) {
  167. return null;
  168. }
  169. var n = this.dom[start];
  170. while (n) {
  171. if (n.nodeType == 1 &amp;&amp; (!selector || Ext.DomQuery.is(n, selector))) {
  172. return !returnDom ? Ext.get(n) : n;
  173. }
  174. n = n[dir];
  175. }
  176. return null;
  177. },
  178. isAncestor: function(element) {
  179. return this.self.isAncestor.call(this.self, this.dom, element);
  180. }
  181. });
  182. </pre>
  183. </body>
  184. </html>