-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-core.DomHelper'>/**
-</span> * @class Ext.core.DomHelper
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-DomHelper'>/**
+</span> * @class Ext.DomHelper
+ * @alternateClassName Ext.core.DomHelper
+ *
* <p>The DomHelper class provides a layer of abstraction from DOM and transparently supports creating
* elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates
* from your DOM building code.</p>
* for a DOM node, depending on whether DomHelper is using fragments or DOM.</div></li>
* <li><b><tt>html</tt></b> : <div class="sub-desc">The innerHTML for the element</div></li>
* </ul></div></p>
+ * <p><b>NOTE:</b> For other arbitrary attributes, the value will currently <b>not</b> be automatically
+ * HTML-escaped prior to building the element's HTML string. This means that if your attribute value
+ * contains special characters that would not normally be allowed in a double-quoted attribute value,
+ * you <b>must</b> manually HTML-encode it beforehand (see {@link Ext.String#htmlEncode}) or risk
+ * malformed HTML being created. This behavior may change in a future release.</p>
*
* <p><b><u>Insertion methods</u></b></p>
* <p>Commonly used insertion methods:
* <div class="mdetail-params"><ul>
- * <li><b><tt>{@link #append}</tt></b> : <div class="sub-desc"></div></li>
- * <li><b><tt>{@link #insertBefore}</tt></b> : <div class="sub-desc"></div></li>
- * <li><b><tt>{@link #insertAfter}</tt></b> : <div class="sub-desc"></div></li>
- * <li><b><tt>{@link #overwrite}</tt></b> : <div class="sub-desc"></div></li>
- * <li><b><tt>{@link #createTemplate}</tt></b> : <div class="sub-desc"></div></li>
- * <li><b><tt>{@link #insertHtml}</tt></b> : <div class="sub-desc"></div></li>
+ * <li><tt>{@link #append}</tt> : <div class="sub-desc"></div></li>
+ * <li><tt>{@link #insertBefore}</tt> : <div class="sub-desc"></div></li>
+ * <li><tt>{@link #insertAfter}</tt> : <div class="sub-desc"></div></li>
+ * <li><tt>{@link #overwrite}</tt> : <div class="sub-desc"></div></li>
+ * <li><tt>{@link #createTemplate}</tt> : <div class="sub-desc"></div></li>
+ * <li><tt>{@link #insertHtml}</tt> : <div class="sub-desc"></div></li>
* </ul></div></p>
*
* <p><b><u>Example</u></b></p>
* <p>This is an example, where an unordered list with 3 children items is appended to an existing
* element with id <tt>'my-div'</tt>:<br>
<pre><code>
-var dh = Ext.core.DomHelper; // create shorthand alias
+var dh = Ext.DomHelper; // create shorthand alias
// specification object
var spec = {
id: 'my-ul',
* <p>An example using a template:<pre><code>
var html = '<a id="{0}" href="{1}" class="nav">{2}</a>';
-var tpl = new Ext.core.DomHelper.createTemplate(html);
+var tpl = new Ext.DomHelper.createTemplate(html);
tpl.append('blog-roll', ['link1', 'http://www.edspencer.net/', "Ed&#39;s Site"]);
tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin&#39;s Site"]);
* </code></pre></p>
* <p>The same example using named parameters:<pre><code>
var html = '<a id="{id}" href="{url}" class="nav">{text}</a>';
-var tpl = new Ext.core.DomHelper.createTemplate(html);
+var tpl = new Ext.DomHelper.createTemplate(html);
tpl.append('blog-roll', {
id: 'link1',
url: 'http://www.edspencer.net/',
* <pre><code>
var html = '<a id="{id}" href="{url}" class="nav">{text}</a>';
-var tpl = new Ext.core.DomHelper.createTemplate(html);
+var tpl = new Ext.DomHelper.createTemplate(html);
tpl.compile();
//... use template like normal
* then the string is used as innerHTML. If {@link #useDom} is <tt>true</tt>, a string specification
* results in the creation of a text node. Usage:</p>
* <pre><code>
-Ext.core.DomHelper.useDom = true; // force it to use DOM; reduces performance
+Ext.DomHelper.useDom = true; // force it to use DOM; reduces performance
* </code></pre>
* @singleton
*/
Ext.ns('Ext.core');
-Ext.core.DomHelper = function(){
+Ext.core.DomHelper = Ext.DomHelper = function(){
var tempTableEl = null,
emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i,
tableRe = /^table|tbody|tr|td$/i,
(sibling == 'firstChild' ? el : el.parentNode).insertBefore(newNode, el[sibling] || el);
}
} else {
- newNode = Ext.core.DomHelper.insertHtml(pos, el, Ext.core.DomHelper.createHtml(o));
+ newNode = Ext.DomHelper.insertHtml(pos, el, Ext.DomHelper.createHtml(o));
}
return returnElement ? Ext.get(newNode, true) : newNode;
}
-
+
function createDom(o, parentNode){
var el,
doc = document,
}
}
}
- Ext.core.DomHelper.applyStyles(el, o.style);
+ Ext.DomHelper.applyStyles(el, o.style);
if ((cn = o.children || o.cn)) {
createDom(cn, el);
return el;
}
-<span id='Ext-core.DomHelper-method-insertIntoTable'> /**
+<span id='Ext-DomHelper-method-insertIntoTable'> /**
</span> * @ignore
* Nasty code for IE's broken table implementation
*/
el.insertBefore(node, before);
return node;
}
-
-<span id='Ext-core.DomHelper-method-createContextualFragment'> /**
+
+<span id='Ext-DomHelper-method-createContextualFragment'> /**
</span> * @ignore
* Fix for IE9 createContextualFragment missing method
- */
+ */
function createContextualFragment(html){
var div = document.createElement("div"),
fragment = document.createDocumentFragment(),
i = 0,
length, childNodes;
-
+
div.innerHTML = html;
childNodes = div.childNodes;
length = childNodes.length;
return fragment;
}
-
+
pub = {
-<span id='Ext-core.DomHelper-method-markup'> /**
+<span id='Ext-DomHelper-method-markup'> /**
</span> * Returns the markup for the passed Element(s) config.
* @param {Object} o The DOM object spec (and children)
* @return {String}
return createHtml(o);
},
-<span id='Ext-core.DomHelper-method-applyStyles'> /**
+<span id='Ext-DomHelper-method-applyStyles'> /**
</span> * 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 e.g. 'width:100px', or object in the form {width:'100px'}, or
styles = styles.call();
}
if (typeof styles == "string") {
- styles = Ext.core.Element.parseStyles(styles);
+ styles = Ext.Element.parseStyles(styles);
}
if (typeof styles == "object") {
el.setStyle(styles);
}
},
-<span id='Ext-core.DomHelper-method-insertHtml'> /**
+<span id='Ext-DomHelper-method-insertHtml'> /**
</span> * Inserts an HTML fragment into the DOM.
* @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
+ *
+ * For example take the following HTML: `<div>Contents</div>`
+ *
+ * Using different `where` values inserts element to the following places:
+ *
+ * - beforeBegin: `<HERE><div>Contents</div>`
+ * - afterBegin: `<div><HERE>Contents</div>`
+ * - beforeEnd: `<div>Contents<HERE></div>`
+ * - afterEnd: `<div>Contents</div><HERE>`
+ *
* @param {HTMLElement/TextNode} el The context element
* @param {String} html The HTML fragment
* @return {HTMLElement} The new node
// add these here because they are used in both branches of the condition.
hash[beforebegin] = ['BeforeBegin', 'previousSibling'];
hash[afterend] = ['AfterEnd', 'nextSibling'];
-
+
// if IE and context element is an HTMLElement
if (el.insertAdjacentHTML) {
if(tableRe.test(el.tagName) && (rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html))){
return rs;
}
-
+
// add these two to the hash.
hash[afterbegin] = ['AfterBegin', 'firstChild'];
hash[beforeend] = ['BeforeEnd', 'lastChild'];
} else {
// we cannot insert anything inside a textnode so...
if (Ext.isTextNode(el)) {
- where = where === 'afterbegin' ? 'beforebegin' : where;
+ where = where === 'afterbegin' ? 'beforebegin' : where;
where = where === 'beforeend' ? 'afterend' : where;
}
range = Ext.supports.CreateContextualFragment ? el.ownerDocument.createRange() : undefined;
} else {
frag = createContextualFragment(html);
}
-
+
if(where == afterbegin){
el.insertBefore(frag, el.firstChild);
}else{
}
//<debug>
Ext.Error.raise({
- sourceClass: 'Ext.core.DomHelper',
+ sourceClass: 'Ext.DomHelper',
sourceMethod: 'insertHtml',
htmlToInsert: html,
targetElement: el,
//</debug>
},
-<span id='Ext-core.DomHelper-method-insertBefore'> /**
+<span id='Ext-DomHelper-method-insertBefore'> /**
</span> * Creates new DOM element(s) and inserts them before el.
- * @param {Mixed} el The context element
+ * @param {String/HTMLElement/Ext.Element} 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.core.Element
- * @return {HTMLElement/Ext.core.Element} The new node
+ * @param {Boolean} returnElement (optional) true to return a Ext.Element
+ * @return {HTMLElement/Ext.Element} The new node
*/
insertBefore : function(el, o, returnElement){
return doInsert(el, o, returnElement, beforebegin);
},
-<span id='Ext-core.DomHelper-method-insertAfter'> /**
+<span id='Ext-DomHelper-method-insertAfter'> /**
</span> * Creates new DOM element(s) and inserts them after el.
- * @param {Mixed} el The context element
+ * @param {String/HTMLElement/Ext.Element} el The context element
* @param {Object} o The DOM object spec (and children)
- * @param {Boolean} returnElement (optional) true to return a Ext.core.Element
- * @return {HTMLElement/Ext.core.Element} The new node
+ * @param {Boolean} returnElement (optional) true to return a Ext.Element
+ * @return {HTMLElement/Ext.Element} The new node
*/
insertAfter : function(el, o, returnElement){
return doInsert(el, o, returnElement, afterend, 'nextSibling');
},
-<span id='Ext-core.DomHelper-method-insertFirst'> /**
+<span id='Ext-DomHelper-method-insertFirst'> /**
</span> * Creates new DOM element(s) and inserts them as the first child of el.
- * @param {Mixed} el The context element
+ * @param {String/HTMLElement/Ext.Element} 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.core.Element
- * @return {HTMLElement/Ext.core.Element} The new node
+ * @param {Boolean} returnElement (optional) true to return a Ext.Element
+ * @return {HTMLElement/Ext.Element} The new node
*/
insertFirst : function(el, o, returnElement){
return doInsert(el, o, returnElement, afterbegin, 'firstChild');
},
-<span id='Ext-core.DomHelper-method-append'> /**
+<span id='Ext-DomHelper-method-append'> /**
</span> * Creates new DOM element(s) and appends them to el.
- * @param {Mixed} el The context element
+ * @param {String/HTMLElement/Ext.Element} 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.core.Element
- * @return {HTMLElement/Ext.core.Element} The new node
+ * @param {Boolean} returnElement (optional) true to return a Ext.Element
+ * @return {HTMLElement/Ext.Element} The new node
*/
append : function(el, o, returnElement){
return doInsert(el, o, returnElement, beforeend, '', true);
},
-<span id='Ext-core.DomHelper-method-overwrite'> /**
+<span id='Ext-DomHelper-method-overwrite'> /**
</span> * Creates new DOM element(s) and overwrites the contents of el with them.
- * @param {Mixed} el The context element
+ * @param {String/HTMLElement/Ext.Element} 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.core.Element
- * @return {HTMLElement/Ext.core.Element} The new node
+ * @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);
},
createHtml : createHtml,
-
-<span id='Ext-core.DomHelper-property-createDom'> /**
+
+<span id='Ext-DomHelper-method-createDom'> /**
</span> * Creates new DOM element(s) without inserting them to the document.
* @param {Object/String} o The DOM object spec (and children) or raw HTML blob
* @return {HTMLElement} The new uninserted node
+ * @method
*/
createDom: createDom,
-
-<span id='Ext-core.DomHelper-property-useDom'> /** True to force the use of DOM instead of html fragments @type Boolean */
+
+<span id='Ext-DomHelper-property-useDom'> /** True to force the use of DOM instead of html fragments @type Boolean */
</span> useDom : false,
-
-<span id='Ext-core.DomHelper-method-createTemplate'> /**
+
+<span id='Ext-DomHelper-method-createTemplate'> /**
</span> * 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 = Ext.core.DomHelper.createHtml(o);
+ var html = Ext.DomHelper.createHtml(o);
return Ext.create('Ext.Template', html);
}
};
return pub;
}();
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff