src/core/core/Element.insertion.js

   1 /*!
   2  * Ext JS Library 3.0.3
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**\r
   8  * @class Ext.Element\r
   9  */\r
  10 Ext.Element.addMethods(\r
  11 function() {\r
  12         var GETDOM = Ext.getDom,\r
  13                 GET = Ext.get,\r
  14                 DH = Ext.DomHelper;\r
  15         \r
  16         return {\r
  17             /**\r
  18              * Appends the passed element(s) to this element\r
  19              * @param {String/HTMLElement/Array/Element/CompositeElement} el\r
  20              * @return {Ext.Element} this\r
  21              */\r
  22             appendChild: function(el){        \r
  23                 return GET(el).appendTo(this);        \r
  24             },\r
  25         \r
  26             /**\r
  27              * Appends this element to the passed element\r
  28              * @param {Mixed} el The new parent element\r
  29              * @return {Ext.Element} this\r
  30              */\r
  31             appendTo: function(el){        \r
  32                 GETDOM(el).appendChild(this.dom);        \r
  33                 return this;\r
  34             },\r
  35         \r
  36             /**\r
  37              * Inserts this element before the passed element in the DOM\r
  38              * @param {Mixed} el The element before which this element will be inserted\r
  39              * @return {Ext.Element} this\r
  40              */\r
  41             insertBefore: function(el){                   \r
  42                 (el = GETDOM(el)).parentNode.insertBefore(this.dom, el);\r
  43                 return this;\r
  44             },\r
  45         \r
  46             /**\r
  47              * Inserts this element after the passed element in the DOM\r
  48              * @param {Mixed} el The element to insert after\r
  49              * @return {Ext.Element} this\r
  50              */\r
  51             insertAfter: function(el){\r
  52                 (el = GETDOM(el)).parentNode.insertBefore(this.dom, el.nextSibling);\r
  53                 return this;\r
  54             },\r
  55         \r
  56             /**\r
  57              * Inserts (or creates) an element (or DomHelper config) as the first child of this element\r
  58              * @param {Mixed/Object} el The id or element to insert or a DomHelper config to create and insert\r
  59              * @return {Ext.Element} The new child\r
  60              */\r
  61             insertFirst: function(el, returnDom){\r
  62             el = el || {};\r
  63             if(el.nodeType || el.dom || typeof el == 'string'){ // element\r
  64                 el = GETDOM(el);\r
  65                 this.dom.insertBefore(el, this.dom.firstChild);\r
  66                 return !returnDom ? GET(el) : el;\r
  67             }else{ // dh config\r
  68                 return this.createChild(el, this.dom.firstChild, returnDom);\r
  69             }\r
  70         },\r
  71         \r
  72             /**\r
  73              * Replaces the passed element with this element\r
  74              * @param {Mixed} el The element to replace\r
  75              * @return {Ext.Element} this\r
  76              */\r
  77             replace: function(el){\r
  78                 el = GET(el);\r
  79                 this.insertBefore(el);\r
  80                 el.remove();\r
  81                 return this;\r
  82             },\r
  83         \r
  84             /**\r
  85              * Replaces this element with the passed element\r
  86              * @param {Mixed/Object} el The new element or a DomHelper config of an element to create\r
  87              * @return {Ext.Element} this\r
  88              */\r
  89             replaceWith: function(el){\r
  90                     var me = this,\r
  91                         Element = Ext.Element;\r
  92             if(el.nodeType || el.dom || typeof el == 'string'){\r
  93                 el = GETDOM(el);\r
  94                 me.dom.parentNode.insertBefore(el, me.dom);\r
  95             }else{\r
  96                 el = DH.insertBefore(me.dom, el);\r
  97             }\r
  98                 \r
  99                 delete Element.cache[me.id];\r
 100                 Ext.removeNode(me.dom);      \r
 101                 me.id = Ext.id(me.dom = el);\r
 102                 return Element.cache[me.id] = me;        \r
 103             },\r
 104             \r
 105                 /**\r
 106                  * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.\r
 107                  * @param {Object} config DomHelper element config object.  If no tag is specified (e.g., {tag:'input'}) then a div will be\r
 108                  * automatically generated with the specified attributes.\r
 109                  * @param {HTMLElement} insertBefore (optional) a child element of this element\r
 110                  * @param {Boolean} returnDom (optional) true to return the dom node instead of creating an Element\r
 111                  * @return {Ext.Element} The new child element\r
 112                  */\r
 113                 createChild: function(config, insertBefore, returnDom){\r
 114                     config = config || {tag:'div'};\r
 115                     return insertBefore ? \r
 116                            DH.insertBefore(insertBefore, config, returnDom !== true) :  \r
 117                            DH[!this.dom.firstChild ? 'overwrite' : 'append'](this.dom, config,  returnDom !== true);\r
 118                 },\r
 119                 \r
 120                 /**\r
 121                  * Creates and wraps this element with another element\r
 122                  * @param {Object} config (optional) DomHelper element config object for the wrapper element or null for an empty div\r
 123                  * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Ext.Element\r
 124                  * @return {HTMLElement/Element} The newly created wrapper element\r
 125                  */\r
 126                 wrap: function(config, returnDom){        \r
 127                     var newEl = DH.insertBefore(this.dom, config || {tag: "div"}, !returnDom);\r
 128                     newEl.dom ? newEl.dom.appendChild(this.dom) : newEl.appendChild(this.dom);\r
 129                     return newEl;\r
 130                 },\r
 131                 \r
 132                 /**\r
 133                  * Inserts an html fragment into this element\r
 134                  * @param {String} where Where to insert the html in relation to this element - beforeBegin, afterBegin, beforeEnd, afterEnd.\r
 135                  * @param {String} html The HTML fragment\r
 136                  * @param {Boolean} returnEl (optional) True to return an Ext.Element (defaults to false)\r
 137                  * @return {HTMLElement/Ext.Element} The inserted node (or nearest related if more than 1 inserted)\r
 138                  */\r
 139                 insertHtml : function(where, html, returnEl){\r
 140                     var el = DH.insertHtml(where, this.dom, html);\r
 141                     return returnEl ? Ext.get(el) : el;\r
 142                 }\r
 143         }\r
 144 }());