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

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