X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/source/core/DomHelper.js diff --git a/source/core/DomHelper.js b/source/core/DomHelper.js deleted file mode 100644 index 36277a4d..00000000 --- a/source/core/DomHelper.js +++ /dev/null @@ -1,419 +0,0 @@ -/* - * Ext JS Library 2.2.1 - * Copyright(c) 2006-2009, Ext JS, LLC. - * licensing@extjs.com - * - * http://extjs.com/license - */ - -/** - * @class Ext.DomHelper - * Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.
- * This is an example, where an unordered list with 5 children items is appended to an existing element with id 'my-div':
- 

-var dh = Ext.DomHelper;
-var list = dh.append('my-div', {
-    id: 'my-ul', tag: 'ul', cls: 'my-list', children: [
-        {tag: 'li', id: 'item0', html: 'List Item 0'},
-        {tag: 'li', id: 'item1', html: 'List Item 1'},
-        {tag: 'li', id: 'item2', html: 'List Item 2'},
-        {tag: 'li', id: 'item3', html: 'List Item 3'},
-        {tag: 'li', id: 'item4', html: 'List Item 4'}
-    ]
-});
-
- *

Element creation specification parameters in this class may also be passed as an Array of - * specification objects. This can be used to insert multiple sibling nodes into an existing - * container very efficiently. For example, to add more list items to the example above:


-dh.append('my-ul', [
-    {tag: 'li', id: 'item5', html: 'List Item 5'},
-    {tag: 'li', id: 'item6', html: 'List Item 6'} ]);
-

- *

Element creation specification parameters may also be strings. If {@link useDom} is false, then the string is used - * as innerHTML. If {@link useDom} is true, a string specification results in the creation of a text node.

- * For more information and examples, see the original blog post. - * @singleton - */ -Ext.DomHelper = function(){ - var tempTableEl = null; - var emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i; - var tableRe = /^table|tbody|tr|td$/i; - - // build as innerHTML where available - var createHtml = function(o){ - if(typeof o == 'string'){ - return o; - } - var b = ""; - if (Ext.isArray(o)) { - for (var i = 0, l = o.length; i < l; i++) { - b += createHtml(o[i]); - } - return b; - } - if(!o.tag){ - o.tag = "div"; - } - b += "<" + o.tag; - for(var attr in o){ - if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeof o[attr] == "function") continue; - if(attr == "style"){ - var s = o["style"]; - if(typeof s == "function"){ - s = s.call(); - } - if(typeof s == "string"){ - b += ' style="' + s + '"'; - }else if(typeof s == "object"){ - b += ' style="'; - for(var key in s){ - if(typeof s[key] != "function"){ - b += key + ":" + s[key] + ";"; - } - } - b += '"'; - } - }else{ - if(attr == "cls"){ - b += ' class="' + o["cls"] + '"'; - }else if(attr == "htmlFor"){ - b += ' for="' + o["htmlFor"] + '"'; - }else{ - b += " " + attr + '="' + o[attr] + '"'; - } - } - } - if(emptyTags.test(o.tag)){ - b += "/>"; - }else{ - b += ">"; - var cn = o.children || o.cn; - if(cn){ - b += createHtml(cn); - } else if(o.html){ - b += o.html; - } - b += ""; - } - return b; - }; - - // build as dom - /** @ignore */ - var createDom = function(o, parentNode){ - var el; - if (Ext.isArray(o)) { // Allow Arrays of siblings to be inserted - el = document.createDocumentFragment(); // in one shot using a DocumentFragment - for(var i = 0, l = o.length; i < l; i++) { - createDom(o[i], el); - } - } else if (typeof o == "string") { // Allow a string as a child spec. - el = document.createTextNode(o); - } else { - el = document.createElement(o.tag||'div'); - var useSet = !!el.setAttribute; // In IE some elements don't have setAttribute - for(var attr in o){ - if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || attr == "style" || typeof o[attr] == "function") continue; - if(attr=="cls"){ - el.className = o["cls"]; - }else{ - if(useSet) el.setAttribute(attr, o[attr]); - else el[attr] = o[attr]; - } - } - Ext.DomHelper.applyStyles(el, o.style); - var cn = o.children || o.cn; - if(cn){ - createDom(cn, el); - } else if(o.html){ - el.innerHTML = o.html; - } - } - if(parentNode){ - parentNode.appendChild(el); - } - return el; - }; - - var ieTable = function(depth, s, h, e){ - tempTableEl.innerHTML = [s, h, e].join(''); - var i = -1, el = tempTableEl; - while(++i < depth){ - el = el.firstChild; - } - return el; - }; - - // kill repeat to save bytes - var ts = '', - te = '
', - tbs = ts+'', - tbe = ''+te, - trs = tbs + '', - tre = ''+tbe; - - /** - * @ignore - * Nasty code for IE's broken table implementation - */ - var insertIntoTable = function(tag, where, el, html){ - if(!tempTableEl){ - tempTableEl = document.createElement('div'); - } - var node; - var before = null; - if(tag == 'td'){ - if(where == 'afterbegin' || where == 'beforeend'){ // INTO a TD - return; - } - if(where == 'beforebegin'){ - before = el; - el = el.parentNode; - } else{ - before = el.nextSibling; - el = el.parentNode; - } - node = ieTable(4, trs, html, tre); - } - else if(tag == 'tr'){ - if(where == 'beforebegin'){ - before = el; - el = el.parentNode; - node = ieTable(3, tbs, html, tbe); - } else if(where == 'afterend'){ - before = el.nextSibling; - el = el.parentNode; - node = ieTable(3, tbs, html, tbe); - } else{ // INTO a TR - if(where == 'afterbegin'){ - before = el.firstChild; - } - node = ieTable(4, trs, html, tre); - } - } else if(tag == 'tbody'){ - if(where == 'beforebegin'){ - before = el; - el = el.parentNode; - node = ieTable(2, ts, html, te); - } else if(where == 'afterend'){ - before = el.nextSibling; - el = el.parentNode; - node = ieTable(2, ts, html, te); - } else{ - if(where == 'afterbegin'){ - before = el.firstChild; - } - node = ieTable(3, tbs, html, tbe); - } - } else{ // TABLE - if(where == 'beforebegin' || where == 'afterend'){ // OUTSIDE the table - return; - } - if(where == 'afterbegin'){ - before = el.firstChild; - } - node = ieTable(2, ts, html, te); - } - el.insertBefore(node, before); - return node; - }; - - - return { - /** True to force the use of DOM instead of html fragments @type Boolean */ - useDom : false, - - /** - * Returns the markup for the passed Element(s) config. - * @param {Object} o The DOM object spec (and children) - * @return {String} - */ - markup : function(o){ - return createHtml(o); - }, - - /** - * Applies a style specification to an element. - * @param {String/HTMLElement} el The element to apply styles to - * @param {String/Object/Function} styles A style specification string eg "width:100px", or object in the form {width:"100px"}, or - * a function which returns such a specification. - */ - applyStyles : function(el, styles){ - if(styles){ - el = Ext.fly(el); - if(typeof styles == "string"){ - var re = /\s?([a-z\-]*)\:\s?([^;]*);?/gi; - var matches; - while ((matches = re.exec(styles)) != null){ - el.setStyle(matches[1], matches[2]); - } - }else if (typeof styles == "object"){ - for (var style in styles){ - el.setStyle(style, styles[style]); - } - }else if (typeof styles == "function"){ - Ext.DomHelper.applyStyles(el, styles.call()); - } - } - }, - - /** - * Inserts an HTML fragment into the DOM. - * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd. - * @param {HTMLElement} el The context element - * @param {String} html The HTML fragmenet - * @return {HTMLElement} The new node - */ - insertHtml : function(where, el, html){ - where = where.toLowerCase(); - if(el.insertAdjacentHTML){ - if(tableRe.test(el.tagName)){ - var rs; - if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){ - return rs; - } - } - switch(where){ - case "beforebegin": - el.insertAdjacentHTML('BeforeBegin', html); - return el.previousSibling; - case "afterbegin": - el.insertAdjacentHTML('AfterBegin', html); - return el.firstChild; - case "beforeend": - el.insertAdjacentHTML('BeforeEnd', html); - return el.lastChild; - case "afterend": - el.insertAdjacentHTML('AfterEnd', html); - return el.nextSibling; - } - throw 'Illegal insertion point -> "' + where + '"'; - } - var range = el.ownerDocument.createRange(); - var frag; - switch(where){ - case "beforebegin": - range.setStartBefore(el); - frag = range.createContextualFragment(html); - el.parentNode.insertBefore(frag, el); - return el.previousSibling; - case "afterbegin": - if(el.firstChild){ - range.setStartBefore(el.firstChild); - frag = range.createContextualFragment(html); - el.insertBefore(frag, el.firstChild); - return el.firstChild; - }else{ - el.innerHTML = html; - return el.firstChild; - } - case "beforeend": - if(el.lastChild){ - range.setStartAfter(el.lastChild); - frag = range.createContextualFragment(html); - el.appendChild(frag); - return el.lastChild; - }else{ - el.innerHTML = html; - return el.lastChild; - } - case "afterend": - range.setStartAfter(el); - frag = range.createContextualFragment(html); - el.parentNode.insertBefore(frag, el.nextSibling); - return el.nextSibling; - } - throw 'Illegal insertion point -> "' + where + '"'; - }, - - /** - * Creates new DOM element(s) and inserts them before el. - * @param {Mixed} el The context element - * @param {Object/String} o The DOM object spec (and children) or raw HTML blob - * @param {Boolean} returnElement (optional) true to return a Ext.Element - * @return {HTMLElement/Ext.Element} The new node - */ - insertBefore : function(el, o, returnElement){ - return this.doInsert(el, o, returnElement, "beforeBegin"); - }, - - /** - * Creates new DOM element(s) and inserts them after el. - * @param {Mixed} el The context element - * @param {Object} o The DOM object spec (and children) - * @param {Boolean} returnElement (optional) true to return a Ext.Element - * @return {HTMLElement/Ext.Element} The new node - */ - insertAfter : function(el, o, returnElement){ - return this.doInsert(el, o, returnElement, "afterEnd", "nextSibling"); - }, - - /** - * Creates new DOM element(s) and inserts them as the first child of el. - * @param {Mixed} el The context element - * @param {Object/String} o The DOM object spec (and children) or raw HTML blob - * @param {Boolean} returnElement (optional) true to return a Ext.Element - * @return {HTMLElement/Ext.Element} The new node - */ - insertFirst : function(el, o, returnElement){ - return this.doInsert(el, o, returnElement, "afterBegin", "firstChild"); - }, - - // private - doInsert : function(el, o, returnElement, pos, sibling){ - el = Ext.getDom(el); - var newNode; - if(this.useDom){ - newNode = createDom(o, null); - (sibling === "firstChild" ? el : el.parentNode).insertBefore(newNode, sibling ? el[sibling] : el); - }else{ - var html = createHtml(o); - newNode = this.insertHtml(pos, el, html); - } - return returnElement ? Ext.get(newNode, true) : newNode; - }, - - /** - * Creates new DOM element(s) and appends them to el. - * @param {Mixed} el The context element - * @param {Object/String} o The DOM object spec (and children) or raw HTML blob - * @param {Boolean} returnElement (optional) true to return a Ext.Element - * @return {HTMLElement/Ext.Element} The new node - */ - append : function(el, o, returnElement){ - el = Ext.getDom(el); - var newNode; - if(this.useDom){ - newNode = createDom(o, null); - el.appendChild(newNode); - }else{ - var html = createHtml(o); - newNode = this.insertHtml("beforeEnd", el, html); - } - return returnElement ? Ext.get(newNode, true) : newNode; - }, - - /** - * Creates new DOM element(s) and overwrites the contents of el with them. - * @param {Mixed} el The context element - * @param {Object/String} o The DOM object spec (and children) or raw HTML blob - * @param {Boolean} returnElement (optional) true to return a Ext.Element - * @return {HTMLElement/Ext.Element} The new node - */ - overwrite : function(el, o, returnElement){ - el = Ext.getDom(el); - el.innerHTML = createHtml(o); - return returnElement ? Ext.get(el.firstChild, true) : el.firstChild; - }, - - /** - * Creates a new Ext.Template from the DOM object spec. - * @param {Object} o The DOM object spec (and children) - * @return {Ext.Template} The new template - */ - createTemplate : function(o){ - var html = createHtml(o); - return new Ext.Template(html); - } - }; -}();