- <div class="body-wrap">
- <div class="top-tools">
- <a class="inner-link" href="#Ext.DomHelper-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
- <a class="inner-link" href="#Ext.DomHelper-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
- <a class="inner-link" href="#Ext.DomHelper-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>
- <a class="bookmark" href="../docs/?class=Ext.DomHelper"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>
- </div>
- <h1>Class Ext.DomHelper</h1>
- <table cellspacing="0">
- <tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr>
- <tr><td class="label">Defined In:</td><td class="hd-info"><a href="../src/DomHelper.js" target="_blank">DomHelper.js</a></td></tr>
- <tr><td class="label">Class:</td><td class="hd-info">DomHelper</td></tr>
- <tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr>
- </table>
- <div class="description">
- *
-Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.<br>
-This is an example, where an unordered list with 5 children items is appended to an existing element with id 'my-div':<br>\r
- <pre><code>var dh = Ext.DomHelper;
-<b>var</b> list = dh.append(<em>'my-div'</em>, {
- id: <em>'my-ul'</em>, tag: <em>'ul'</em>, cls: <em>'my-list'</em>, children: [
+<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.DomHelper-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.DomHelper-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.DomHelper-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="bookmark" href="../docs/?class=Ext.DomHelper"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a> </div><h1>Class <a href="source/DomHelper.html#cls-Ext.DomHelper">Ext.DomHelper</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/DomHelper.html#cls-Ext.DomHelper">DomHelper.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/DomHelper.html#cls-Ext.DomHelper">DomHelper</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr></table><div class="description"><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>
+<p><b><u>DomHelper element specification object</u></b></p>
+<p>A specification object is used when creating elements. Attributes of this object
+are assumed to be element attributes, except for 4 special attributes:
+<div class="mdetail-params"><ul>
+<li><b><tt>tag</tt></b> : <div class="sub-desc">The tag name of the element</div></li>
+<li><b><tt>children</tt></b> : or <tt>cn</tt><div class="sub-desc">An array of the
+same kind of element definition objects to be created and appended. These can be nested
+as deep as you want.</div></li>
+<li><b><tt>cls</tt></b> : <div class="sub-desc">The class attribute of the element.
+This will end up being either the "class" attribute on a HTML fragment or className
+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><u>Insertion methods</u></b></p>
+<p>Commonly used insertion methods:
+<div class="mdetail-params"><ul>
+<li><b><tt><a href="output/Ext.DomHelper.html#Ext.DomHelper-append" ext:member="append" ext:cls="Ext.DomHelper">append</a></tt></b> : <div class="sub-desc"></div></li>
+<li><b><tt><a href="output/Ext.DomHelper.html#Ext.DomHelper-insertBefore" ext:member="insertBefore" ext:cls="Ext.DomHelper">insertBefore</a></tt></b> : <div class="sub-desc"></div></li>
+<li><b><tt><a href="output/Ext.DomHelper.html#Ext.DomHelper-insertAfter" ext:member="insertAfter" ext:cls="Ext.DomHelper">insertAfter</a></tt></b> : <div class="sub-desc"></div></li>
+<li><b><tt><a href="output/Ext.DomHelper.html#Ext.DomHelper-overwrite" ext:member="overwrite" ext:cls="Ext.DomHelper">overwrite</a></tt></b> : <div class="sub-desc"></div></li>
+<li><b><tt><a href="output/Ext.DomHelper.html#Ext.DomHelper-createTemplate" ext:member="createTemplate" ext:cls="Ext.DomHelper">createTemplate</a></tt></b> : <div class="sub-desc"></div></li>
+<li><b><tt><a href="output/Ext.DomHelper.html#Ext.DomHelper-insertHtml" ext:member="insertHtml" ext:cls="Ext.DomHelper">insertHtml</a></tt></b> : <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><b>var</b> dh = Ext.DomHelper; <i>// create shorthand alias</i>
+<i>// specification object</i>
+<b>var</b> spec = {
+ id: <em>'my-ul'</em>,
+ tag: <em>'ul'</em>,
+ cls: <em>'my-list'</em>,
+ <i>// append children after creating</i>
+ children: [ <i>// may also specify <em>'cn'</em> instead of <em>'children'</em></i>
{tag: <em>'li'</em>, id: <em>'item0'</em>, html: <em>'List Item 0'</em>},
{tag: <em>'li'</em>, id: <em>'item1'</em>, html: <em>'List Item 1'</em>},
- {tag: <em>'li'</em>, id: <em>'item2'</em>, html: <em>'List Item 2'</em>},
- {tag: <em>'li'</em>, id: <em>'item3'</em>, html: <em>'List Item 3'</em>},
- {tag: <em>'li'</em>, id: <em>'item4'</em>, html: <em>'List Item 4'</em>}
+ {tag: <em>'li'</em>, id: <em>'item2'</em>, html: <em>'List Item 2'</em>}
]
-});</code></pre>
+};
+<b>var</b> list = dh.append(
+ <em>'my-div'</em>, <i>// the context element <em>'my-div'</em> can either be the id or the actual node</i>
+ spec <i>// the specification object</i>
+);</code></pre></p>
<p>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:<pre><code>dh.append(<em>'my-ul'</em>, [
- {tag: <em>'li'</em>, id: <em>'item5'</em>, html: <em>'List Item 5'</em>},
- {tag: <em>'li'</em>, id: <em>'item6'</em>, html: <em>'List Item 6'</em>} ]);</code></pre></p>
-<p>Element creation specification parameters may also be strings. If <a ext:cls="useDom" href="output/useDom.html">useDom</a> is false, then the string is used
-as innerHTML. If <a ext:cls="useDom" href="output/useDom.html">useDom</a> is true, a string specification results in the creation of a text node.</p>
-For more information and examples, see <a href="http://www.jackslocum.com/blog/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/">the original blog post</a>.<br><br><i>This class is a singleton and cannot be created directly.</i> </div>
-
- <div class="hr"></div>
- <a id="Ext.DomHelper-props"></a>
- <h2>Public Properties</h2>
- <table cellspacing="0" class="member-table">
- <tr>
- <th class="sig-header" colspan="2">Property</th>
- <th class="msource-header">Defined By</th>
- </tr>
- <tr class="property-row">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.DomHelper-useDom"></a>\r
- <b>useDom</b> : Boolean <div class="mdesc">\r
- True to force the use of DOM instead of html fragments </div>\r
- </td>\r
- <td class="msource">DomHelper</td>\r
- </tr>\r
- </table>
- <a id="Ext.DomHelper-methods"></a>
- <h2>Public Methods</h2>
- <table cellspacing="0" class="member-table">
- <tr>
- <th class="sig-header" colspan="2">Method</th>
- <th class="msource-header">Defined By</th>
- </tr>
- <tr class="method-row expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.DomHelper-append"></a>\r
- <b>append</b>( <code>Mixed el</code>, <code>Object/String o</code>, <span class="optional" title="Optional">[<code>Boolean returnElement</code>]</span> ) : HTMLElement/Ext.Element <div class="mdesc">\r
- <div class="short">Creates new DOM element(s) and appends them to el.</div>\r
- <div class="long">\r
- Creates new DOM element(s) and appends them to el. <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>el</code> : Mixed<div class="sub-desc">The context element</div></li><li><code>o</code> : Object/String<div class="sub-desc">The DOM object spec (and children) or raw HTML blob</div></li><li><code>returnElement</code> : Boolean<div class="sub-desc">(optional) true to return a Ext.Element</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">DomHelper</td>\r
- </tr>\r
- <tr class="method-row alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.DomHelper-applyStyles"></a>\r
- <b>applyStyles</b>( <code>String/HTMLElement el</code>, <code>String/Object/Function styles</code> ) : void <div class="mdesc">\r
- <div class="short">Applies a style specification to an element.</div>\r
- <div class="long">\r
- Applies a style specification to an element. <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>el</code> : String/HTMLElement<div class="sub-desc">The element to apply styles to</div></li><li><code>styles</code> : String/Object/Function<div class="sub-desc">A style specification string eg "width:100px", or object in the form {width:"100px"}, or
-a function which returns such a specification.</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>void</code></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">DomHelper</td>\r
- </tr>\r
- <tr class="method-row expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.DomHelper-createTemplate"></a>\r
- <b>createTemplate</b>( <code>Object o</code> ) : Ext.Template <div class="mdesc">\r
- <div class="short">Creates a new Ext.Template from the DOM object spec.</div>\r
- <div class="long">\r
- Creates a new Ext.Template from the DOM object spec. <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>o</code> : Object<div class="sub-desc">The DOM object spec (and children)</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>Ext.Template</code><div class="sub-desc">The new template</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">DomHelper</td>\r
- </tr>\r
- <tr class="method-row alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.DomHelper-insertAfter"></a>\r
- <b>insertAfter</b>( <code>Mixed el</code>, <code>Object o</code>, <span class="optional" title="Optional">[<code>Boolean returnElement</code>]</span> ) : HTMLElement/Ext.Element <div class="mdesc">\r
- <div class="short">Creates new DOM element(s) and inserts them after el.</div>\r
- <div class="long">\r
- Creates new DOM element(s) and inserts them after el. <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>el</code> : Mixed<div class="sub-desc">The context element</div></li><li><code>o</code> : Object<div class="sub-desc">The DOM object spec (and children)</div></li><li><code>returnElement</code> : Boolean<div class="sub-desc">(optional) true to return a Ext.Element</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">DomHelper</td>\r
- </tr>\r
- <tr class="method-row expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.DomHelper-insertBefore"></a>\r
- <b>insertBefore</b>( <code>Mixed el</code>, <code>Object/String o</code>, <span class="optional" title="Optional">[<code>Boolean returnElement</code>]</span> ) : HTMLElement/Ext.Element <div class="mdesc">\r
- <div class="short">Creates new DOM element(s) and inserts them before el.</div>\r
- <div class="long">\r
- Creates new DOM element(s) and inserts them before el. <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>el</code> : Mixed<div class="sub-desc">The context element</div></li><li><code>o</code> : Object/String<div class="sub-desc">The DOM object spec (and children) or raw HTML blob</div></li><li><code>returnElement</code> : Boolean<div class="sub-desc">(optional) true to return a Ext.Element</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">DomHelper</td>\r
- </tr>\r
- <tr class="method-row alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.DomHelper-insertFirst"></a>\r
- <b>insertFirst</b>( <code>Mixed el</code>, <code>Object/String o</code>, <span class="optional" title="Optional">[<code>Boolean returnElement</code>]</span> ) : HTMLElement/Ext.Element <div class="mdesc">\r
- <div class="short">Creates new DOM element(s) and inserts them as the first child of el.</div>\r
- <div class="long">\r
- Creates new DOM element(s) and inserts them as the first child of el. <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>el</code> : Mixed<div class="sub-desc">The context element</div></li><li><code>o</code> : Object/String<div class="sub-desc">The DOM object spec (and children) or raw HTML blob</div></li><li><code>returnElement</code> : Boolean<div class="sub-desc">(optional) true to return a Ext.Element</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">DomHelper</td>\r
- </tr>\r
- <tr class="method-row expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.DomHelper-insertHtml"></a>\r
- <b>insertHtml</b>( <code>String where</code>, <code>HTMLElement el</code>, <code>String html</code> ) : HTMLElement <div class="mdesc">\r
- <div class="short">Inserts an HTML fragment into the DOM.</div>\r
- <div class="long">\r
- Inserts an HTML fragment into the DOM. <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>where</code> : String<div class="sub-desc">Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.</div></li><li><code>el</code> : HTMLElement<div class="sub-desc">The context element</div></li><li><code>html</code> : String<div class="sub-desc">The HTML fragmenet</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>HTMLElement</code><div class="sub-desc">The new node</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">DomHelper</td>\r
- </tr>\r
- <tr class="method-row alt expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.DomHelper-markup"></a>\r
- <b>markup</b>( <code>Object o</code> ) : String <div class="mdesc">\r
- <div class="short">Returns the markup for the passed Element(s) config.</div>\r
- <div class="long">\r
- Returns the markup for the passed Element(s) config. <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>o</code> : Object<div class="sub-desc">The DOM object spec (and children)</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>String</code></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">DomHelper</td>\r
- </tr>\r
- <tr class="method-row expandable">\r
- <td class="micon"><a class="exi" href="#expand"> </a></td>\r
- <td class="sig">\r
- <a id="Ext.DomHelper-overwrite"></a>\r
- <b>overwrite</b>( <code>Mixed el</code>, <code>Object/String o</code>, <span class="optional" title="Optional">[<code>Boolean returnElement</code>]</span> ) : HTMLElement/Ext.Element <div class="mdesc">\r
- <div class="short">Creates new DOM element(s) and overwrites the contents of el with them.</div>\r
- <div class="long">\r
- Creates new DOM element(s) and overwrites the contents of el with them. <div class="mdetail-params">\r
- <strong>Parameters:</strong>\r
- <ul><li><code>el</code> : Mixed<div class="sub-desc">The context element</div></li><li><code>o</code> : Object/String<div class="sub-desc">The DOM object spec (and children) or raw HTML blob</div></li><li><code>returnElement</code> : Boolean<div class="sub-desc">(optional) true to return a Ext.Element</div></li> </ul>\r
- <strong>Returns:</strong>\r
- <ul>\r
- <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node</div></li>\r
- </ul>\r
- </div>\r
- </div>\r
- </div>\r
- </td>\r
- <td class="msource">DomHelper</td>\r
- </tr>\r
- </table>
- <a id="Ext.DomHelper-events"></a>
- <h2>Public Events</h2>
- <div class="no-members">This class has no public events.</div>
- </div>
\ No newline at end of file
+ {tag: <em>'li'</em>, id: <em>'item3'</em>, html: <em>'List Item 3'</em>},
+ {tag: <em>'li'</em>, id: <em>'item4'</em>, html: <em>'List Item 4'</em>}
+]);</code></pre></p>
+<p><b><u>Templating</u></b></p>
+<p>The real power is in the built-in templating. Instead of creating or appending any elements,
+<tt><a href="output/Ext.DomHelper.html#Ext.DomHelper-createTemplate" ext:member="createTemplate" ext:cls="Ext.DomHelper">createTemplate</a></tt> returns a Template object which can be used over and over to
+insert new elements. Revisiting the example above, we could utilize templating this time:
+<pre><code><i>// create the node</i>
+<b>var</b> list = dh.append(<em>'my-div'</em>, {tag: <em>'ul'</em>, cls: <em>'my-list'</em>});
+<i>// get template</i>
+<b>var</b> tpl = dh.createTemplate({tag: <em>'li'</em>, id: <em>'item{0}'</em>, html: <em>'List Item {0}'</em>});
+
+<b>for</b>(<b>var</b> i = 0; i < 5, i++){
+ tpl.append(list, [i]); <i>// use template to append to the actual node</i>
+}</code></pre></p>
+<p>An example using a template:<pre><code><b>var</b> html = <em>'<a id=<em>"{0}"</em> href=<em>"{1}"</em> class=<em>"nav"</em>>{2}</a>'</em>;
+
+<b>var</b> tpl = <b>new</b> Ext.DomHelper.createTemplate(html);
+tpl.append(<em>'blog-roll'</em>, [<em>'link1'</em>, <em>'http:<i>//www.jackslocum.com/'</em>, <em>"Jack's Site"</em>]);</i>
+tpl.append(<em>'blog-roll'</em>, [<em>'link2'</em>, <em>'http:<i>//www.dustindiaz.com/'</em>, <em>"Dustin's Site"</em>]);</i></code></pre></p>
+<p>The same example using named parameters:<pre><code><b>var</b> html = <em>'<a id=<em>"{id}"</em> href=<em>"{url}"</em> class=<em>"nav"</em>>{text}</a>'</em>;
+
+<b>var</b> tpl = <b>new</b> Ext.DomHelper.createTemplate(html);
+tpl.append(<em>'blog-roll'</em>, {
+ id: <em>'link1'</em>,
+ url: <em>'http:<i>//www.jackslocum.com/'</em>,</i>
+ text: <em>"Jack's Site"</em>
+});
+tpl.append(<em>'blog-roll'</em>, {
+ id: <em>'link2'</em>,
+ url: <em>'http:<i>//www.dustindiaz.com/'</em>,</i>
+ text: <em>"Dustin's Site"</em>
+});</code></pre></p>
+<p><b><u>Compiling Templates</u></b></p>
+<p>Templates are applied using regular expressions. The performance is great, but if
+you are adding a bunch of DOM elements using the same template, you can increase
+performance even further by <a href="output/Ext.Template.html#Ext.Template-compile" ext:member="compile" ext:cls="Ext.Template">"compiling"</a> the template.
+The way "<a href="output/Ext.Template.html#Ext.Template-compile" ext:member="compile" ext:cls="Ext.Template">compile()</a>" works is the template is parsed and
+broken up at the different variable points and a dynamic function is created and eval'ed.
+The generated function performs string concatenation of these parts and the passed
+variables instead of using regular expressions.
+<pre><code><b>var</b> html = <em>'<a id=<em>"{id}"</em> href=<em>"{url}"</em> class=<em>"nav"</em>>{text}</a>'</em>;
+
+<b>var</b> tpl = <b>new</b> Ext.DomHelper.createTemplate(html);
+tpl.compile();
+
+<i>//... use template like normal</i></code></pre></p>
+<p><b><u>Performance Boost</u></b></p>
+<p>DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead
+of DOM can significantly boost performance.</p>
+<p>Element creation specification parameters may also be strings. If <a href="output/Ext.DomHelper.html#Ext.DomHelper-useDom" ext:member="useDom" ext:cls="Ext.DomHelper">useDom</a> is <tt>false</tt>,
+then the string is used as innerHTML. If <a href="output/Ext.DomHelper.html#Ext.DomHelper-useDom" ext:member="useDom" ext:cls="Ext.DomHelper">useDom</a> is <tt>true</tt>, a string specification
+results in the creation of a text node. Usage:</p>
+<pre><code>Ext.DomHelper.useDom = true; <i>// force it to use DOM; reduces performance</i></code></pre><br><br><i>This class is a singleton and cannot be created directly.</i></div><div class="hr"></div><a id="Ext.DomHelper-props"></a><h2>Public Properties</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Property</th><th class="msource-header">Defined By</th></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.DomHelper-useDom"></a><b><a href="source/DomHelper-more.html#prop-Ext.DomHelper-useDom">useDom</a></b> : Boolean<div class="mdesc">True to force the use of DOM instead of html fragments</div></td><td class="msource">DomHelper</td></tr></tbody></table><a id="Ext.DomHelper-methods"></a><h2>Public Methods</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Method</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.DomHelper-applyStyles"></a><b><a href="source/DomHelper.html#method-Ext.DomHelper-applyStyles">applyStyles</a></b>( <code>String/HTMLElement el</code>, <code>String/Object/Function styles</code> )
+ :
+ void<div class="mdesc"><div class="short">Applies a style specification to an element.</div><div class="long">Applies a style specification to an element.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>el</code> : String/HTMLElement<div class="sub-desc">The element to apply styles to</div></li><li><code>styles</code> : String/Object/Function<div class="sub-desc">A style specification string e.g. 'width:100px', or object in the form {width:'100px'}, or
+a function which returns such a specification.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">DomHelper</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.DomHelper-createDom"></a><b><a href="source/DomHelper-more.html#method-Ext.DomHelper-createDom">createDom</a></b>( <code>Object/String o</code> )
+ :
+ HTMLElement<div class="mdesc"><div class="short">Creates new DOM element(s) without inserting them to the document.</div><div class="long">Creates new DOM element(s) without inserting them to the document.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>o</code> : Object/String<div class="sub-desc">The DOM object spec (and children) or raw HTML blob</div></li></ul><strong>Returns:</strong><ul><li><code>HTMLElement</code><div class="sub-desc">The new uninserted node</div></li></ul></div></div></div></td><td class="msource">DomHelper</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.DomHelper-createTemplate"></a><b><a href="source/DomHelper-more.html#method-Ext.DomHelper-createTemplate">createTemplate</a></b>( <code>Object o</code> )
+ :
+ Ext.Template<div class="mdesc"><div class="short">Creates a new Ext.Template from the DOM object spec.</div><div class="long">Creates a new Ext.Template from the DOM object spec.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>o</code> : Object<div class="sub-desc">The DOM object spec (and children)</div></li></ul><strong>Returns:</strong><ul><li><code>Ext.Template</code><div class="sub-desc">The new template</div></li></ul></div></div></div></td><td class="msource">DomHelper</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.DomHelper-insertHtml"></a><b><a href="source/DomHelper.html#method-Ext.DomHelper-insertHtml">insertHtml</a></b>( <code>String where</code>, <code>HTMLElement el</code>, <code>String html</code> )
+ :
+ HTMLElement<div class="mdesc"><div class="short">Inserts an HTML fragment into the DOM.</div><div class="long">Inserts an HTML fragment into the DOM.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>where</code> : String<div class="sub-desc">Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.</div></li><li><code>el</code> : HTMLElement<div class="sub-desc">The context element</div></li><li><code>html</code> : String<div class="sub-desc">The HTML fragment</div></li></ul><strong>Returns:</strong><ul><li><code>HTMLElement</code><div class="sub-desc">The new node</div></li></ul></div></div></div></td><td class="msource">DomHelper</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.DomHelper-markup"></a><b><a href="source/DomHelper.html#method-Ext.DomHelper-markup">markup</a></b>( <code>Object o</code> )
+ :
+ String<div class="mdesc"><div class="short">Returns the markup for the passed Element(s) config.</div><div class="long">Returns the markup for the passed Element(s) config.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>o</code> : Object<div class="sub-desc">The DOM object spec (and children)</div></li></ul><strong>Returns:</strong><ul><li><code>String</code><div class="sub-desc"></div></li></ul></div></div></div></td><td class="msource">DomHelper</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.DomHelper-overwrite"></a><b><a href="source/DomHelper.html#method-Ext.DomHelper-overwrite">overwrite</a></b>( <code>Mixed el</code>, <code>Object/String o</code>, <span title="Optional" class="optional">[<code>Boolean returnElement</code>]</span> )
+ :
+ HTMLElement/Ext.Element<div class="mdesc"><div class="short">Creates new DOM element(s) and overwrites the contents of el with them.</div><div class="long">Creates new DOM element(s) and overwrites the contents of el with them.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>el</code> : Mixed<div class="sub-desc">The context element</div></li><li><code>o</code> : Object/String<div class="sub-desc">The DOM object spec (and children) or raw HTML blob</div></li><li><code>returnElement</code> : Boolean<div class="sub-desc">(optional) true to return a Ext.Element</div></li></ul><strong>Returns:</strong><ul><li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node</div></li></ul></div></div></div></td><td class="msource">DomHelper</td></tr></tbody></table><a id="Ext.DomHelper-events"></a><h2>Public Events</h2><div class="no-members">This class has no public events.</div></div>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff