1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
7 <meta http-equiv="content-type" content="text/html; charset=undefined" />
8 <meta name="generator" content="JsDoc Toolkit" />
11 <title>JsDoc Reference - Roo.DomHelper</title>
14 <link rel="stylesheet" type="text/css" href="../../css/roojs.css" />
15 <link rel="stylesheet" type="text/css" href="../default.css" />
18 <script type="text/javascript" src="../page.js">
25 <body onload="RooDocsPage.onload();">
28 <div class="body-wrap">
30 <!-- ============================== links to methods. ================================= -->
32 <div class="top-tools">
34 <a class="inner-link" href="#Roo.DomHelper-props"><img src="resources/s.gif" class="item-icon icon-prop">Properties</a>
35 <a class="inner-link" href="#Roo.DomHelper-methods"><img src="resources/s.gif" class="item-icon icon-method">Methods</a>
36 <a class="inner-link" href="#Roo.DomHelper-events"><img src="resources/s.gif" class="item-icon icon-event">Events</a>
37 <a class="inner-link" href="#Roo.DomHelper-configs"><img src="resources/s.gif" class="item-icon icon-config">Config Options</a>
38 <a class="bookmark" href="NEED_TO_CREATE_DIRECT_LINK_HREF"><img src="resources/s.gif" class="item-icon icon-fav">Direct Link</a>
43 <!-- ============================== inheritance Block. ================================= -->
45 <!-- ============================== class title / details ============================ -->
48 <h1 class="classTitle">
53 <table cellspacing="0" class="class-summary-table">
55 <tr><td class="label">Package:</td><td class="hd-info">Roo</td></tr>
57 <tr><td class="label">Defined In:</td><td class="hd-info">
59 <a href="./src/Roo_DomHelper.js.html">Roo/DomHelper.js</a>.
62 <tr><td class="label">Class:</td><td class="hd-info">DomHelper</td></tr>
70 <!-- ============================== class summary ========================== -->
71 <div class="description">
72 Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.<br/>For more information see <a href="http://web.archive.org/web/20071221063734/http://www.jackslocum.com/blog/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/">this blog post with examples</a>.
76 <!-- ============================== Class comment block... ========================== -->
78 <div class="comments">
79 <b>Class Comments / Notes</B> =>
80 <u onclick="parent.CommentDialog.showCommentId = 'Roo.DomHelper';">[Add Your comment/notes about this class]</u>
82 <iframe frameborder="0" id="comments-Roo" style="border: none;width:100%;"
83 src="/blog.php/GtkDjsComments/Roo.DomHelper.html"></iframe>
88 <!-- ============================== config options ========================== -->
93 <div class="hr"></div>
94 <a id="Roo.DomHelper-configs"></a>
98 <table cellspacing="0" class="member-table">
99 <caption class="Empty">Config Options - Has None</caption>
113 <!-- ============================== public properties ==================== -->
117 <a id="Roo.DomHelper-props"></a>
123 <table cellspacing="0" class="member-table">
124 <caption class="Empty">Public Properties - Has None</caption>
130 <!-- ============================== methods summary / details ======================== -->
133 <a id="Roo.DomHelper-methods"></a>
134 <!-- constructor?? -->
141 <!-- then dynamics first -->
148 <table cellspacing="0" class="member-table">
149 <caption>Public Methods</caption>
151 <th class="sig-header" colspan="2">Method</th>
152 <th class="msource-header">Defined By</th>
162 <tr class="method-row config-row-alt0 expandable notInherited">
163 <td class="micon"><a class="exi" href="#expand"> </a></td>
167 <a id="Roo.DomHelper-method-append" name=".append"></a>
168 <div class="fixedFont">
169 <span class="attributes">Roo.DomHelper.</span><b class="itemname">append</b>
171 (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement/Element <B><i>el</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a>/String <B><i>o</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a> <B><i>returnElement</i></B>)
177 <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">HTMLElement</a>/Roo.Element
186 <div class="short">Creates new Dom element(s) and appends them to el</div>
192 Creates new Dom element(s) and appends them to el
199 <dl class="detailList">
200 <dt class="heading">Parameters:</dt>
203 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement/Element</span> <b>el</b>
206 <dd>The context element</dd>
209 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a>/String</span> <b>o</b>
212 <dd>The Dom object spec (and children) or raw HTML blob</dd>
215 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a></span> <b>returnElement</b>
218 <dd>(optional) true to return a Roo.Element</dd>
226 <dl class="detailList">
227 <dt class="heading">Returns:</dt>
229 <dd><span class="fixedFont"><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">HTMLElement</a>/Roo.Element</span> The new node</dd>
251 <tr class="method-row config-row-alt1 expandable notInherited">
252 <td class="micon"><a class="exi" href="#expand"> </a></td>
256 <a id="Roo.DomHelper-method-applyStyles" name=".applyStyles"></a>
257 <div class="fixedFont">
258 <span class="attributes">Roo.DomHelper.</span><b class="itemname">applyStyles</b>
260 (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement <B><i>el</i></B>, <a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/Object/Function <B><i>styles</i></B>)
267 <div class="short">Applies a style specification to an element</div>
273 Applies a style specification to an element
280 <dl class="detailList">
281 <dt class="heading">Parameters:</dt>
284 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement</span> <b>el</b>
287 <dd>The element to apply styles to</dd>
290 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/Object/Function</span> <b>styles</b>
293 <dd>A style specification string eg "width:100px", or object in the form {width:"100px"}, or<br/>a function which returns such a specification.</dd>
319 <tr class="method-row config-row-alt0 expandable notInherited">
320 <td class="micon"><a class="exi" href="#expand"> </a></td>
324 <a id="Roo.DomHelper-method-createTemplate" name=".createTemplate"></a>
325 <div class="fixedFont">
326 <span class="attributes">Roo.DomHelper.</span><b class="itemname">createTemplate</b>
328 (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>o</i></B>)
334 Roo.DomHelper.Template
343 <div class="short">Creates a new Roo.DomHelper.Template from the Dom object spec</div>
349 Creates a new Roo.DomHelper.Template from the Dom object spec
356 <dl class="detailList">
357 <dt class="heading">Parameters:</dt>
360 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span> <b>o</b>
363 <dd>The Dom object spec (and children)</dd>
371 <dl class="detailList">
372 <dt class="heading">Returns:</dt>
374 <dd><span class="fixedFont">Roo.DomHelper.Template</span> The new template</dd>
396 <tr class="method-row config-row-alt1 expandable notInherited">
397 <td class="micon"><a class="exi" href="#expand"> </a></td>
401 <a id="Roo.DomHelper-method-insertAfter" name=".insertAfter"></a>
402 <div class="fixedFont">
403 <span class="attributes">Roo.DomHelper.</span><b class="itemname">insertAfter</b>
405 (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement/Element <B><i>el</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>o</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a> <B><i>returnElement</i></B>)
411 <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">HTMLElement</a>/Roo.Element
420 <div class="short">Creates new Dom element(s) and inserts them after el</div>
426 Creates new Dom element(s) and inserts them after el
433 <dl class="detailList">
434 <dt class="heading">Parameters:</dt>
437 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement/Element</span> <b>el</b>
440 <dd>The context element</dd>
443 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span> <b>o</b>
446 <dd>The Dom object spec (and children)</dd>
449 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a></span> <b>returnElement</b>
452 <dd>(optional) true to return a Roo.Element</dd>
460 <dl class="detailList">
461 <dt class="heading">Returns:</dt>
463 <dd><span class="fixedFont"><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">HTMLElement</a>/Roo.Element</span> The new node</dd>
485 <tr class="method-row config-row-alt0 expandable notInherited">
486 <td class="micon"><a class="exi" href="#expand"> </a></td>
490 <a id="Roo.DomHelper-method-insertBefore" name=".insertBefore"></a>
491 <div class="fixedFont">
492 <span class="attributes">Roo.DomHelper.</span><b class="itemname">insertBefore</b>
494 (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement/Element <B><i>el</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a>/String <B><i>o</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a> <B><i>returnElement</i></B>)
500 <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">HTMLElement</a>/Roo.Element
509 <div class="short">Creates new Dom element(s) and inserts them before el</div>
515 Creates new Dom element(s) and inserts them before el
522 <dl class="detailList">
523 <dt class="heading">Parameters:</dt>
526 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement/Element</span> <b>el</b>
529 <dd>The context element</dd>
532 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a>/String</span> <b>o</b>
535 <dd>The Dom object spec (and children) or raw HTML blob</dd>
538 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a></span> <b>returnElement</b>
541 <dd>(optional) true to return a Roo.Element</dd>
549 <dl class="detailList">
550 <dt class="heading">Returns:</dt>
552 <dd><span class="fixedFont"><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">HTMLElement</a>/Roo.Element</span> The new node</dd>
574 <tr class="method-row config-row-alt1 expandable notInherited">
575 <td class="micon"><a class="exi" href="#expand"> </a></td>
579 <a id="Roo.DomHelper-method-insertFirst" name=".insertFirst"></a>
580 <div class="fixedFont">
581 <span class="attributes">Roo.DomHelper.</span><b class="itemname">insertFirst</b>
583 (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement/Element <B><i>el</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a>/String <B><i>o</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a> <B><i>returnElement</i></B>)
589 <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">HTMLElement</a>/Roo.Element
598 <div class="short">Creates new Dom element(s) and inserts them as the first child of el</div>
604 Creates new Dom element(s) and inserts them as the first child of el
611 <dl class="detailList">
612 <dt class="heading">Parameters:</dt>
615 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement/Element</span> <b>el</b>
618 <dd>The context element</dd>
621 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a>/String</span> <b>o</b>
624 <dd>The Dom object spec (and children) or raw HTML blob</dd>
627 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a></span> <b>returnElement</b>
630 <dd>(optional) true to return a Roo.Element</dd>
638 <dl class="detailList">
639 <dt class="heading">Returns:</dt>
641 <dd><span class="fixedFont"><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">HTMLElement</a>/Roo.Element</span> The new node</dd>
663 <tr class="method-row config-row-alt0 expandable notInherited">
664 <td class="micon"><a class="exi" href="#expand"> </a></td>
668 <a id="Roo.DomHelper-method-insertHtml" name=".insertHtml"></a>
669 <div class="fixedFont">
670 <span class="attributes">Roo.DomHelper.</span><b class="itemname">insertHtml</b>
672 (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a> <B><i>where</i></B>, <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">HTMLElement</a> <B><i>el</i></B>, <a href="./String.html#constructor" roo:cls="String.html#constructor">String</a> <B><i>html</i></B>)
678 <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">HTMLElement</a>
687 <div class="short">Inserts an HTML fragment into the Dom</div>
693 Inserts an HTML fragment into the Dom
700 <dl class="detailList">
701 <dt class="heading">Parameters:</dt>
704 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span> <b>where</b>
707 <dd>Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.</dd>
710 <span class="fixedFont"><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">HTMLElement</a></span> <b>el</b>
713 <dd>The context element</dd>
716 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span> <b>html</b>
719 <dd>The HTML fragmenet</dd>
727 <dl class="detailList">
728 <dt class="heading">Returns:</dt>
730 <dd><span class="fixedFont"><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">HTMLElement</a></span> The new node</dd>
752 <tr class="method-row config-row-alt1 expandable notInherited">
753 <td class="micon"><a class="exi" href="#expand"> </a></td>
757 <a id="Roo.DomHelper-method-markup" name=".markup"></a>
758 <div class="fixedFont">
759 <span class="attributes">Roo.DomHelper.</span><b class="itemname">markup</b>
761 (<a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a> <B><i>o</i></B>)
767 <a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>
776 <div class="short">Returns the markup for the passed Element(s) config</div>
782 Returns the markup for the passed Element(s) config
789 <dl class="detailList">
790 <dt class="heading">Parameters:</dt>
793 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a></span> <b>o</b>
796 <dd>The Dom object spec (and children)</dd>
804 <dl class="detailList">
805 <dt class="heading">Returns:</dt>
807 <dd><span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a></span> </dd>
829 <tr class="method-row config-row-alt0 expandable notInherited">
830 <td class="micon"><a class="exi" href="#expand"> </a></td>
834 <a id="Roo.DomHelper-method-overwrite" name=".overwrite"></a>
835 <div class="fixedFont">
836 <span class="attributes">Roo.DomHelper.</span><b class="itemname">overwrite</b>
838 (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement/Element <B><i>el</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a>/String <B><i>o</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a> <B><i>returnElement</i></B>)
844 <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">HTMLElement</a>/Roo.Element
853 <div class="short">Creates new Dom element(s) and overwrites the contents of el with them</div>
859 Creates new Dom element(s) and overwrites the contents of el with them
866 <dl class="detailList">
867 <dt class="heading">Parameters:</dt>
870 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement/Element</span> <b>el</b>
873 <dd>The context element</dd>
876 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Object">Object</a>/String</span> <b>o</b>
879 <dd>The Dom object spec (and children) or raw HTML blob</dd>
882 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a></span> <b>returnElement</b>
885 <dd>(optional) true to return a Roo.Element</dd>
893 <dl class="detailList">
894 <dt class="heading">Returns:</dt>
896 <dd><span class="fixedFont"><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">HTMLElement</a>/Roo.Element</span> The new node</dd>
921 <!-- ============================== events summary / details ======================== -->
924 <a id="Roo.DomHelper-events"></a>
930 <table cellspacing="0" class="member-table">
931 <caption class="Empty">Events - Has None</caption>
942 <!-- ============================== footer ================================= -->
943 <div class="fineprint" style="clear:both">
945 Documentation generated by <a href="http://www.akbkhome.com" target="_blankt">Introspection Doc Generator</a> on Tue Apr 08 2014 16:57:13 GMT+0800 (HKT)
947 <a href="http://www.jsdoctoolkit.org/" target="_blank">JsDoc Toolkit</a>