docs/source/Element.insertion.html

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