3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
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.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
18 Ext.Element.addMethods({
20 * Appends the passed element(s) to this element
21 * @param {String/HTMLElement/Ext.Element} el
22 * The id of the node, a DOM Node or an existing Element.
23 * @return {Ext.Element} this
25 appendChild : function(el) {
26 return Ext.get(el).appendTo(this);
30 * Appends this element to the passed element
31 * @param {String/HTMLElement/Ext.Element} el The new parent element.
32 * The id of the node, a DOM Node or an existing Element.
33 * @return {Ext.Element} this
35 appendTo : function(el) {
36 Ext.getDom(el).appendChild(this.dom);
41 * Inserts this element before the passed element in the DOM
42 * @param {String/HTMLElement/Ext.Element} el The element before which this element will be inserted.
43 * The id of the node, a DOM Node or an existing Element.
44 * @return {Ext.Element} this
46 insertBefore : function(el) {
48 el.parentNode.insertBefore(this.dom, el);
53 * Inserts this element after the passed element in the DOM
54 * @param {String/HTMLElement/Ext.Element} el The element to insert after.
55 * The id of the node, a DOM Node or an existing Element.
56 * @return {Ext.Element} this
58 insertAfter : function(el) {
60 el.parentNode.insertBefore(this.dom, el.nextSibling);
65 * Inserts (or creates) an element (or DomHelper config) as the first child of this element
66 * @param {String/HTMLElement/Ext.Element/Object} el The id or element to insert or a DomHelper config
67 * to create and insert
68 * @return {Ext.Element} The new child
70 insertFirst : function(el, returnDom) {
72 if (el.nodeType || el.dom || typeof el == 'string') { // element
74 this.dom.insertBefore(el, this.dom.firstChild);
75 return !returnDom ? Ext.get(el) : el;
78 return this.createChild(el, this.dom.firstChild, returnDom);
83 * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
84 * @param {String/HTMLElement/Ext.Element/Object/Array} el The id, element to insert or a DomHelper config
85 * to create and insert *or* an array of any of those.
86 * @param {String} where (optional) 'before' or 'after' defaults to before
87 * @param {Boolean} returnDom (optional) True to return the .;ll;l,raw DOM element instead of Ext.Element
88 * @return {Ext.Element} The inserted Element. If an array is passed, the last inserted element is returned.
90 insertSibling: function(el, where, returnDom){
92 isAfter = (where || 'before').toLowerCase() == 'after',
97 Ext.each(el, function(e) {
98 rt = Ext.fly(insertEl, '_internal').insertSibling(e, where, returnDom);
108 if(el.nodeType || el.dom){
109 rt = me.dom.parentNode.insertBefore(Ext.getDom(el), isAfter ? me.dom.nextSibling : me.dom);
114 if (isAfter && !me.dom.nextSibling) {
115 rt = Ext.DomHelper.append(me.dom.parentNode, el, !returnDom);
117 rt = Ext.DomHelper[isAfter ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom);
124 * Replaces the passed element with this element
125 * @param {String/HTMLElement/Ext.Element} el The element to replace.
126 * The id of the node, a DOM Node or an existing Element.
127 * @return {Ext.Element} this
129 replace : function(el) {
131 this.insertBefore(el);
137 * Replaces this element with the passed element
138 * @param {String/HTMLElement/Ext.Element/Object} el The new element (id of the node, a DOM Node
139 * or an existing Element) or a DomHelper config of an element to create
140 * @return {Ext.Element} this
142 replaceWith: function(el){
145 if(el.nodeType || el.dom || typeof el == 'string'){
147 me.dom.parentNode.insertBefore(el, me.dom);
149 el = Ext.DomHelper.insertBefore(me.dom, el);
152 delete Ext.cache[me.id];
153 Ext.removeNode(me.dom);
154 me.id = Ext.id(me.dom = el);
155 Ext.Element.addToCache(me.isFlyweight ? new Ext.Element(me.dom) : me);
160 * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
161 * @param {Object} config DomHelper element config object. If no tag is specified (e.g., {tag:'input'}) then a div will be
162 * automatically generated with the specified attributes.
163 * @param {HTMLElement} insertBefore (optional) a child element of this element
164 * @param {Boolean} returnDom (optional) true to return the dom node instead of creating an Element
165 * @return {Ext.Element} The new child element
167 createChild : function(config, insertBefore, returnDom) {
168 config = config || {tag:'div'};
170 return Ext.DomHelper.insertBefore(insertBefore, config, returnDom !== true);
173 return Ext.DomHelper[!this.dom.firstChild ? 'insertFirst' : 'append'](this.dom, config, returnDom !== true);
178 * Creates and wraps this element with another element
179 * @param {Object} config (optional) DomHelper element config object for the wrapper element or null for an empty div
180 * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Ext.Element
181 * @return {HTMLElement/Ext.Element} The newly created wrapper element
183 wrap : function(config, returnDom) {
184 var newEl = Ext.DomHelper.insertBefore(this.dom, config || {tag: "div"}, !returnDom),
185 d = newEl.dom || newEl;
187 d.appendChild(this.dom);
192 * Inserts an html fragment into this element
193 * @param {String} where Where to insert the html in relation to this element - beforeBegin, afterBegin, beforeEnd, afterEnd.
194 * See {@link Ext.DomHelper#insertHtml} for details.
195 * @param {String} html The HTML fragment
196 * @param {Boolean} returnEl (optional) True to return an Ext.Element (defaults to false)
197 * @return {HTMLElement/Ext.Element} The inserted node (or nearest related if more than 1 inserted)
199 insertHtml : function(where, html, returnEl) {
200 var el = Ext.DomHelper.insertHtml(where, this.dom, html);
201 return returnEl ? Ext.get(el) : el;