src/core/src/dom/Element.insertion.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * @class Ext.core.Element
  17  */
  18 Ext.core.Element.addMethods({
  19     /**
  20      * Appends the passed element(s) to this element
  21      * @param {String/HTMLElement/Array/Element/CompositeElement} el
  22      * @return {Ext.core.Element} this
  23      */
  24     appendChild : function(el) {
  25         return Ext.get(el).appendTo(this);
  26     },
  27
  28     /**
  29      * Appends this element to the passed element
  30      * @param {Mixed} el The new parent element
  31      * @return {Ext.core.Element} this
  32      */
  33     appendTo : function(el) {
  34         Ext.getDom(el).appendChild(this.dom);
  35         return this;
  36     },
  37
  38     /**
  39      * Inserts this element before the passed element in the DOM
  40      * @param {Mixed} el The element before which this element will be inserted
  41      * @return {Ext.core.Element} this
  42      */
  43     insertBefore : function(el) {
  44         el = Ext.getDom(el);
  45         el.parentNode.insertBefore(this.dom, el);
  46         return this;
  47     },
  48
  49     /**
  50      * Inserts this element after the passed element in the DOM
  51      * @param {Mixed} el The element to insert after
  52      * @return {Ext.core.Element} this
  53      */
  54     insertAfter : function(el) {
  55         el = Ext.getDom(el);
  56         el.parentNode.insertBefore(this.dom, el.nextSibling);
  57         return this;
  58     },
  59
  60     /**
  61      * Inserts (or creates) an element (or DomHelper config) as the first child of this element
  62      * @param {Mixed/Object} el The id or element to insert or a DomHelper config to create and insert
  63      * @return {Ext.core.Element} The new child
  64      */
  65     insertFirst : function(el, returnDom) {
  66         el = el || {};
  67         if (el.nodeType || el.dom || typeof el == 'string') { // element
  68             el = Ext.getDom(el);
  69             this.dom.insertBefore(el, this.dom.firstChild);
  70             return !returnDom ? Ext.get(el) : el;
  71         }
  72         else { // dh config
  73             return this.createChild(el, this.dom.firstChild, returnDom);
  74         }
  75     },
  76
  77     /**
  78      * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
  79      * @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.
  80      * @param {String} where (optional) 'before' or 'after' defaults to before
  81      * @param {Boolean} returnDom (optional) True to return the .;ll;l,raw DOM element instead of Ext.core.Element
  82      * @return {Ext.core.Element} The inserted Element. If an array is passed, the last inserted element is returned.
  83      */
  84     insertSibling: function(el, where, returnDom){
  85         var me = this, rt,
  86         isAfter = (where || 'before').toLowerCase() == 'after',
  87         insertEl;
  88
  89         if(Ext.isArray(el)){
  90             insertEl = me;
  91             Ext.each(el, function(e) {
  92                 rt = Ext.fly(insertEl, '_internal').insertSibling(e, where, returnDom);
  93                 if(isAfter){
  94                     insertEl = rt;
  95                 }
  96             });
  97             return rt;
  98         }
  99
 100         el = el || {};
 101
 102         if(el.nodeType || el.dom){
 103             rt = me.dom.parentNode.insertBefore(Ext.getDom(el), isAfter ? me.dom.nextSibling : me.dom);
 104             if (!returnDom) {
 105                 rt = Ext.get(rt);
 106             }
 107         }else{
 108             if (isAfter && !me.dom.nextSibling) {
 109                 rt = Ext.core.DomHelper.append(me.dom.parentNode, el, !returnDom);
 110             } else {
 111                 rt = Ext.core.DomHelper[isAfter ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom);
 112             }
 113         }
 114         return rt;
 115     },
 116
 117     /**
 118      * Replaces the passed element with this element
 119      * @param {Mixed} el The element to replace
 120      * @return {Ext.core.Element} this
 121      */
 122     replace : function(el) {
 123         el = Ext.get(el);
 124         this.insertBefore(el);
 125         el.remove();
 126         return this;
 127     },
 128
 129     /**
 130      * Replaces this element with the passed element
 131      * @param {Mixed/Object} el The new element or a DomHelper config of an element to create
 132      * @return {Ext.core.Element} this
 133      */
 134     replaceWith: function(el){
 135         var me = this;
 136
 137         if(el.nodeType || el.dom || typeof el == 'string'){
 138             el = Ext.get(el);
 139             me.dom.parentNode.insertBefore(el, me.dom);
 140         }else{
 141             el = Ext.core.DomHelper.insertBefore(me.dom, el);
 142         }
 143
 144         delete Ext.cache[me.id];
 145         Ext.removeNode(me.dom);
 146         me.id = Ext.id(me.dom = el);
 147         Ext.core.Element.addToCache(me.isFlyweight ? new Ext.core.Element(me.dom) : me);
 148         return me;
 149     },
 150
 151     /**
 152      * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
 153      * @param {Object} config DomHelper element config object.  If no tag is specified (e.g., {tag:'input'}) then a div will be
 154      * automatically generated with the specified attributes.
 155      * @param {HTMLElement} insertBefore (optional) a child element of this element
 156      * @param {Boolean} returnDom (optional) true to return the dom node instead of creating an Element
 157      * @return {Ext.core.Element} The new child element
 158      */
 159     createChild : function(config, insertBefore, returnDom) {
 160         config = config || {tag:'div'};
 161         if (insertBefore) {
 162             return Ext.core.DomHelper.insertBefore(insertBefore, config, returnDom !== true);
 163         }
 164         else {
 165             return Ext.core.DomHelper[!this.dom.firstChild ? 'insertFirst' : 'append'](this.dom, config,  returnDom !== true);
 166         }
 167     },
 168
 169     /**
 170      * Creates and wraps this element with another element
 171      * @param {Object} config (optional) DomHelper element config object for the wrapper element or null for an empty div
 172      * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Ext.core.Element
 173      * @return {HTMLElement/Element} The newly created wrapper element
 174      */
 175     wrap : function(config, returnDom) {
 176         var newEl = Ext.core.DomHelper.insertBefore(this.dom, config || {tag: "div"}, !returnDom),
 177             d = newEl.dom || newEl;
 178
 179         d.appendChild(this.dom);
 180         return newEl;
 181     },
 182
 183     /**
 184      * 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      * @param {String} html The HTML fragment
 187      * @param {Boolean} returnEl (optional) True to return an Ext.core.Element (defaults to false)
 188      * @return {HTMLElement/Ext.core.Element} The inserted node (or nearest related if more than 1 inserted)
 189      */
 190     insertHtml : function(where, html, returnEl) {
 191         var el = Ext.core.DomHelper.insertHtml(where, this.dom, html);
 192         return returnEl ? Ext.get(el) : el;
 193     }
 194 });
 195