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