AbstractElement.insertion.html 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  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.addMethods({
  22. <span id='Ext-dom-AbstractElement-method-appendChild'> /**
  23. </span> * Appends the passed element(s) to this element
  24. * @param {String/HTMLElement/Ext.dom.AbstractElement} el
  25. * The id of the node, a DOM Node or an existing Element.
  26. * @return {Ext.dom.AbstractElement} This element
  27. */
  28. appendChild: function(el) {
  29. return Ext.get(el).appendTo(this);
  30. },
  31. <span id='Ext-dom-AbstractElement-method-appendTo'> /**
  32. </span> * Appends this element to the passed element
  33. * @param {String/HTMLElement/Ext.dom.AbstractElement} el The new parent element.
  34. * The id of the node, a DOM Node or an existing Element.
  35. * @return {Ext.dom.AbstractElement} This element
  36. */
  37. appendTo: function(el) {
  38. Ext.getDom(el).appendChild(this.dom);
  39. return this;
  40. },
  41. <span id='Ext-dom-AbstractElement-method-insertBefore'> /**
  42. </span> * Inserts this element before the passed element in the DOM
  43. * @param {String/HTMLElement/Ext.dom.AbstractElement} el The element before which this element will be inserted.
  44. * The id of the node, a DOM Node or an existing Element.
  45. * @return {Ext.dom.AbstractElement} This element
  46. */
  47. insertBefore: function(el) {
  48. el = Ext.getDom(el);
  49. el.parentNode.insertBefore(this.dom, el);
  50. return this;
  51. },
  52. <span id='Ext-dom-AbstractElement-method-insertAfter'> /**
  53. </span> * Inserts this element after the passed element in the DOM
  54. * @param {String/HTMLElement/Ext.dom.AbstractElement} el The element to insert after.
  55. * The id of the node, a DOM Node or an existing Element.
  56. * @return {Ext.dom.AbstractElement} This element
  57. */
  58. insertAfter: function(el) {
  59. el = Ext.getDom(el);
  60. el.parentNode.insertBefore(this.dom, el.nextSibling);
  61. return this;
  62. },
  63. <span id='Ext-dom-AbstractElement-method-insertFirst'> /**
  64. </span> * Inserts (or creates) an element (or DomHelper config) as the first child of this element
  65. * @param {String/HTMLElement/Ext.dom.AbstractElement/Object} el The id or element to insert or a DomHelper config
  66. * to create and insert
  67. * @return {Ext.dom.AbstractElement} The new child
  68. */
  69. insertFirst: function(el, returnDom) {
  70. el = el || {};
  71. if (el.nodeType || el.dom || typeof el == 'string') { // element
  72. el = Ext.getDom(el);
  73. this.dom.insertBefore(el, this.dom.firstChild);
  74. return !returnDom ? Ext.get(el) : el;
  75. }
  76. else { // dh config
  77. return this.createChild(el, this.dom.firstChild, returnDom);
  78. }
  79. },
  80. <span id='Ext-dom-AbstractElement-method-insertSibling'> /**
  81. </span> * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
  82. * @param {String/HTMLElement/Ext.dom.AbstractElement/Object/Array} el The id, element to insert or a DomHelper config
  83. * to create and insert *or* an array of any of those.
  84. * @param {String} [where='before'] 'before' or 'after'
  85. * @param {Boolean} [returnDom=false] True to return the .;ll;l,raw DOM element instead of Ext.dom.AbstractElement
  86. * @return {Ext.dom.AbstractElement} The inserted Element. If an array is passed, the last inserted element is returned.
  87. */
  88. insertSibling: function(el, where, returnDom){
  89. var me = this,
  90. isAfter = (where || 'before').toLowerCase() == 'after',
  91. rt, insertEl, eLen, e;
  92. if (Ext.isArray(el)) {
  93. insertEl = me;
  94. eLen = el.length;
  95. for (e = 0; e &lt; eLen; e++) {
  96. rt = Ext.fly(insertEl, '_internal').insertSibling(el[e], where, returnDom);
  97. if (isAfter) {
  98. insertEl = rt;
  99. }
  100. }
  101. return rt;
  102. }
  103. el = el || {};
  104. if(el.nodeType || el.dom){
  105. rt = me.dom.parentNode.insertBefore(Ext.getDom(el), isAfter ? me.dom.nextSibling : me.dom);
  106. if (!returnDom) {
  107. rt = Ext.get(rt);
  108. }
  109. }else{
  110. if (isAfter &amp;&amp; !me.dom.nextSibling) {
  111. rt = Ext.core.DomHelper.append(me.dom.parentNode, el, !returnDom);
  112. } else {
  113. rt = Ext.core.DomHelper[isAfter ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom);
  114. }
  115. }
  116. return rt;
  117. },
  118. <span id='Ext-dom-AbstractElement-method-replace'> /**
  119. </span> * Replaces the passed element with this element
  120. * @param {String/HTMLElement/Ext.dom.AbstractElement} el The element to replace.
  121. * The id of the node, a DOM Node or an existing Element.
  122. * @return {Ext.dom.AbstractElement} This element
  123. */
  124. replace: function(el) {
  125. el = Ext.get(el);
  126. this.insertBefore(el);
  127. el.remove();
  128. return this;
  129. },
  130. <span id='Ext-dom-AbstractElement-method-replaceWith'> /**
  131. </span> * Replaces this element with the passed element
  132. * @param {String/HTMLElement/Ext.dom.AbstractElement/Object} el The new element (id of the node, a DOM Node
  133. * or an existing Element) or a DomHelper config of an element to create
  134. * @return {Ext.dom.AbstractElement} This element
  135. */
  136. replaceWith: function(el){
  137. var me = this;
  138. if(el.nodeType || el.dom || typeof el == 'string'){
  139. el = Ext.get(el);
  140. me.dom.parentNode.insertBefore(el, me.dom);
  141. }else{
  142. el = Ext.core.DomHelper.insertBefore(me.dom, el);
  143. }
  144. delete Ext.cache[me.id];
  145. Ext.removeNode(me.dom);
  146. me.id = Ext.id(me.dom = el);
  147. Ext.dom.AbstractElement.addToCache(me.isFlyweight ? new Ext.dom.AbstractElement(me.dom) : me);
  148. return me;
  149. },
  150. <span id='Ext-dom-AbstractElement-method-createChild'> /**
  151. </span> * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
  152. * @param {Object} config DomHelper element config object. If no tag is specified (e.g., {tag:'input'}) then a div will be
  153. * automatically generated with the specified attributes.
  154. * @param {HTMLElement} [insertBefore] a child element of this element
  155. * @param {Boolean} [returnDom=false] true to return the dom node instead of creating an Element
  156. * @return {Ext.dom.AbstractElement} The new child element
  157. */
  158. createChild: function(config, insertBefore, returnDom) {
  159. config = config || {tag:'div'};
  160. if (insertBefore) {
  161. return Ext.core.DomHelper.insertBefore(insertBefore, config, returnDom !== true);
  162. }
  163. else {
  164. return Ext.core.DomHelper[!this.dom.firstChild ? 'insertFirst' : 'append'](this.dom, config, returnDom !== true);
  165. }
  166. },
  167. <span id='Ext-dom-AbstractElement-method-wrap'> /**
  168. </span> * Creates and wraps this element with another element
  169. * @param {Object} [config] DomHelper element config object for the wrapper element or null for an empty div
  170. * @param {Boolean} [returnDom=false] True to return the raw DOM element instead of Ext.dom.AbstractElement
  171. * @param {String} [selector] A {@link Ext.dom.Query DomQuery} selector to select a descendant node within the created element to use as the wrapping element.
  172. * @return {HTMLElement/Ext.dom.AbstractElement} The newly created wrapper element
  173. */
  174. wrap: function(config, returnDom, selector) {
  175. var newEl = Ext.core.DomHelper.insertBefore(this.dom, config || {tag: &quot;div&quot;}, true),
  176. target = newEl;
  177. if (selector) {
  178. target = Ext.DomQuery.selectNode(selector, newEl.dom);
  179. }
  180. target.appendChild(this.dom);
  181. return returnDom ? newEl.dom : newEl;
  182. },
  183. <span id='Ext-dom-AbstractElement-method-insertHtml'> /**
  184. </span> * Inserts an html fragment into this element
  185. * @param {String} where Where to insert the html in relation to this element - beforeBegin, afterBegin, beforeEnd, afterEnd.
  186. * See {@link Ext.dom.Helper#insertHtml} for details.
  187. * @param {String} html The HTML fragment
  188. * @param {Boolean} [returnEl=false] True to return an Ext.dom.AbstractElement
  189. * @return {HTMLElement/Ext.dom.AbstractElement} The inserted node (or nearest related if more than 1 inserted)
  190. */
  191. insertHtml: function(where, html, returnEl) {
  192. var el = Ext.core.DomHelper.insertHtml(where, this.dom, html);
  193. return returnEl ? Ext.get(el) : el;
  194. }
  195. });
  196. </pre>
  197. </body>
  198. </html>