docs/source/Element.insertion.html

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