docs/output/Ext.DomHelper.html

   1         <div class="body-wrap">
   2         <div class="top-tools">
   3             <a class="inner-link" href="#Ext.DomHelper-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
   4             <a class="inner-link" href="#Ext.DomHelper-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
   5             <a class="inner-link" href="#Ext.DomHelper-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>
   6                         <a class="bookmark" href="../docs/?class=Ext.DomHelper"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>
   7         </div>
   8                 <h1>Class Ext.DomHelper</h1>
   9         <table cellspacing="0">
  10             <tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr>
  11             <tr><td class="label">Defined In:</td><td class="hd-info"><a href="../src/DomHelper.js" target="_blank">DomHelper.js</a></td></tr>
  12             <tr><td class="label">Class:</td><td class="hd-info">DomHelper</td></tr>
  13                                     <tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr>
  14                     </table>
  15         <div class="description">
  16             *
  17 Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.<br>
  18 This is an example, where an unordered list with 5 children items is appended to an existing element with id 'my-div':<br>\r
  19  <pre><code>var dh = Ext.DomHelper;
  20 <b>var</b> list = dh.append(<em>'my-div'</em>, {
  21     id: <em>'my-ul'</em>, tag: <em>'ul'</em>, cls: <em>'my-list'</em>, children: [
  22         {tag: <em>'li'</em>, id: <em>'item0'</em>, html: <em>'List Item 0'</em>},
  23         {tag: <em>'li'</em>, id: <em>'item1'</em>, html: <em>'List Item 1'</em>},
  24         {tag: <em>'li'</em>, id: <em>'item2'</em>, html: <em>'List Item 2'</em>},
  25         {tag: <em>'li'</em>, id: <em>'item3'</em>, html: <em>'List Item 3'</em>},
  26         {tag: <em>'li'</em>, id: <em>'item4'</em>, html: <em>'List Item 4'</em>}
  27     ]
  28 });</code></pre>
  29 <p>Element creation specification parameters in this class may also be passed as an Array of
  30 specification objects. This can be used to insert multiple sibling nodes into an existing
  31 container very efficiently. For example, to add more list items to the example above:<pre><code>dh.append(<em>'my-ul'</em>, [
  32     {tag: <em>'li'</em>, id: <em>'item5'</em>, html: <em>'List Item 5'</em>},
  33     {tag: <em>'li'</em>, id: <em>'item6'</em>, html: <em>'List Item 6'</em>} ]);</code></pre></p>
  34 <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
  35 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>
  36 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>
  37
  38         <div class="hr"></div>
  39                 <a id="Ext.DomHelper-props"></a>
  40         <h2>Public Properties</h2>
  41                 <table cellspacing="0" class="member-table">
  42             <tr>
  43                 <th class="sig-header" colspan="2">Property</th>
  44                 <th class="msource-header">Defined By</th>
  45             </tr>
  46                 <tr class="property-row">\r
  47         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  48         <td class="sig">\r
  49         <a id="Ext.DomHelper-useDom"></a>\r
  50             <b>useDom</b> : Boolean            <div class="mdesc">\r
  51                             True to force the use of DOM instead of html fragments                        </div>\r
  52         </td>\r
  53         <td class="msource">DomHelper</td>\r
  54     </tr>\r
  55             </table>
  56                 <a id="Ext.DomHelper-methods"></a>
  57         <h2>Public Methods</h2>
  58                 <table cellspacing="0" class="member-table">
  59             <tr>
  60                 <th class="sig-header" colspan="2">Method</th>
  61                 <th class="msource-header">Defined By</th>
  62             </tr>
  63                 <tr class="method-row expandable">\r
  64         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  65         <td class="sig">\r
  66         <a id="Ext.DomHelper-append"></a>\r
  67             <b>append</b>(&nbsp;<code>Mixed el</code>, <code>Object/String o</code>, <span class="optional" title="Optional">[<code>Boolean returnElement</code>]</span>&nbsp;) : HTMLElement/Ext.Element            <div class="mdesc">\r
  68                         <div class="short">Creates new DOM element(s) and appends them to el.</div>\r
  69             <div class="long">\r
  70                 Creates new DOM element(s) and appends them to el.    <div class="mdetail-params">\r
  71         <strong>Parameters:</strong>\r
  72         <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
  73         <strong>Returns:</strong>\r
  74         <ul>\r
  75             <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node</div></li>\r
  76         </ul>\r
  77     </div>\r
  78                 </div>\r
  79                         </div>\r
  80         </td>\r
  81         <td class="msource">DomHelper</td>\r
  82     </tr>\r
  83         <tr class="method-row alt expandable">\r
  84         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  85         <td class="sig">\r
  86         <a id="Ext.DomHelper-applyStyles"></a>\r
  87             <b>applyStyles</b>(&nbsp;<code>String/HTMLElement el</code>, <code>String/Object/Function styles</code>&nbsp;) : void            <div class="mdesc">\r
  88                         <div class="short">Applies a style specification to an element.</div>\r
  89             <div class="long">\r
  90                 Applies a style specification to an element.    <div class="mdetail-params">\r
  91         <strong>Parameters:</strong>\r
  92         <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
  93 a function which returns such a specification.</div></li>        </ul>\r
  94         <strong>Returns:</strong>\r
  95         <ul>\r
  96             <li><code>void</code></li>\r
  97         </ul>\r
  98     </div>\r
  99                 </div>\r
 100                         </div>\r
 101         </td>\r
 102         <td class="msource">DomHelper</td>\r
 103     </tr>\r
 104         <tr class="method-row expandable">\r
 105         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 106         <td class="sig">\r
 107         <a id="Ext.DomHelper-createTemplate"></a>\r
 108             <b>createTemplate</b>(&nbsp;<code>Object o</code>&nbsp;) : Ext.Template            <div class="mdesc">\r
 109                         <div class="short">Creates a new Ext.Template from the DOM object spec.</div>\r
 110             <div class="long">\r
 111                 Creates a new Ext.Template from the DOM object spec.    <div class="mdetail-params">\r
 112         <strong>Parameters:</strong>\r
 113         <ul><li><code>o</code> : Object<div class="sub-desc">The DOM object spec (and children)</div></li>        </ul>\r
 114         <strong>Returns:</strong>\r
 115         <ul>\r
 116             <li><code>Ext.Template</code><div class="sub-desc">The new template</div></li>\r
 117         </ul>\r
 118     </div>\r
 119                 </div>\r
 120                         </div>\r
 121         </td>\r
 122         <td class="msource">DomHelper</td>\r
 123     </tr>\r
 124         <tr class="method-row alt expandable">\r
 125         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 126         <td class="sig">\r
 127         <a id="Ext.DomHelper-insertAfter"></a>\r
 128             <b>insertAfter</b>(&nbsp;<code>Mixed el</code>, <code>Object o</code>, <span class="optional" title="Optional">[<code>Boolean returnElement</code>]</span>&nbsp;) : HTMLElement/Ext.Element            <div class="mdesc">\r
 129                         <div class="short">Creates new DOM element(s) and inserts them after el.</div>\r
 130             <div class="long">\r
 131                 Creates new DOM element(s) and inserts them after el.    <div class="mdetail-params">\r
 132         <strong>Parameters:</strong>\r
 133         <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
 134         <strong>Returns:</strong>\r
 135         <ul>\r
 136             <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node</div></li>\r
 137         </ul>\r
 138     </div>\r
 139                 </div>\r
 140                         </div>\r
 141         </td>\r
 142         <td class="msource">DomHelper</td>\r
 143     </tr>\r
 144         <tr class="method-row expandable">\r
 145         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 146         <td class="sig">\r
 147         <a id="Ext.DomHelper-insertBefore"></a>\r
 148             <b>insertBefore</b>(&nbsp;<code>Mixed el</code>, <code>Object/String o</code>, <span class="optional" title="Optional">[<code>Boolean returnElement</code>]</span>&nbsp;) : HTMLElement/Ext.Element            <div class="mdesc">\r
 149                         <div class="short">Creates new DOM element(s) and inserts them before el.</div>\r
 150             <div class="long">\r
 151                 Creates new DOM element(s) and inserts them before el.    <div class="mdetail-params">\r
 152         <strong>Parameters:</strong>\r
 153         <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
 154         <strong>Returns:</strong>\r
 155         <ul>\r
 156             <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node</div></li>\r
 157         </ul>\r
 158     </div>\r
 159                 </div>\r
 160                         </div>\r
 161         </td>\r
 162         <td class="msource">DomHelper</td>\r
 163     </tr>\r
 164         <tr class="method-row alt expandable">\r
 165         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 166         <td class="sig">\r
 167         <a id="Ext.DomHelper-insertFirst"></a>\r
 168             <b>insertFirst</b>(&nbsp;<code>Mixed el</code>, <code>Object/String o</code>, <span class="optional" title="Optional">[<code>Boolean returnElement</code>]</span>&nbsp;) : HTMLElement/Ext.Element            <div class="mdesc">\r
 169                         <div class="short">Creates new DOM element(s) and inserts them as the first child of el.</div>\r
 170             <div class="long">\r
 171                 Creates new DOM element(s) and inserts them as the first child of el.    <div class="mdetail-params">\r
 172         <strong>Parameters:</strong>\r
 173         <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
 174         <strong>Returns:</strong>\r
 175         <ul>\r
 176             <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node</div></li>\r
 177         </ul>\r
 178     </div>\r
 179                 </div>\r
 180                         </div>\r
 181         </td>\r
 182         <td class="msource">DomHelper</td>\r
 183     </tr>\r
 184         <tr class="method-row expandable">\r
 185         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 186         <td class="sig">\r
 187         <a id="Ext.DomHelper-insertHtml"></a>\r
 188             <b>insertHtml</b>(&nbsp;<code>String where</code>, <code>HTMLElement el</code>, <code>String html</code>&nbsp;) : HTMLElement            <div class="mdesc">\r
 189                         <div class="short">Inserts an HTML fragment into the DOM.</div>\r
 190             <div class="long">\r
 191                 Inserts an HTML fragment into the DOM.    <div class="mdetail-params">\r
 192         <strong>Parameters:</strong>\r
 193         <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
 194         <strong>Returns:</strong>\r
 195         <ul>\r
 196             <li><code>HTMLElement</code><div class="sub-desc">The new node</div></li>\r
 197         </ul>\r
 198     </div>\r
 199                 </div>\r
 200                         </div>\r
 201         </td>\r
 202         <td class="msource">DomHelper</td>\r
 203     </tr>\r
 204         <tr class="method-row alt expandable">\r
 205         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 206         <td class="sig">\r
 207         <a id="Ext.DomHelper-markup"></a>\r
 208             <b>markup</b>(&nbsp;<code>Object o</code>&nbsp;) : String            <div class="mdesc">\r
 209                         <div class="short">Returns the markup for the passed Element(s) config.</div>\r
 210             <div class="long">\r
 211                 Returns the markup for the passed Element(s) config.    <div class="mdetail-params">\r
 212         <strong>Parameters:</strong>\r
 213         <ul><li><code>o</code> : Object<div class="sub-desc">The DOM object spec (and children)</div></li>        </ul>\r
 214         <strong>Returns:</strong>\r
 215         <ul>\r
 216             <li><code>String</code></li>\r
 217         </ul>\r
 218     </div>\r
 219                 </div>\r
 220                         </div>\r
 221         </td>\r
 222         <td class="msource">DomHelper</td>\r
 223     </tr>\r
 224         <tr class="method-row expandable">\r
 225         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 226         <td class="sig">\r
 227         <a id="Ext.DomHelper-overwrite"></a>\r
 228             <b>overwrite</b>(&nbsp;<code>Mixed el</code>, <code>Object/String o</code>, <span class="optional" title="Optional">[<code>Boolean returnElement</code>]</span>&nbsp;) : HTMLElement/Ext.Element            <div class="mdesc">\r
 229                         <div class="short">Creates new DOM element(s) and overwrites the contents of el with them.</div>\r
 230             <div class="long">\r
 231                 Creates new DOM element(s) and overwrites the contents of el with them.    <div class="mdetail-params">\r
 232         <strong>Parameters:</strong>\r
 233         <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
 234         <strong>Returns:</strong>\r
 235         <ul>\r
 236             <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node</div></li>\r
 237         </ul>\r
 238     </div>\r
 239                 </div>\r
 240                         </div>\r
 241         </td>\r
 242         <td class="msource">DomHelper</td>\r
 243     </tr>\r
 244             </table>
 245                 <a id="Ext.DomHelper-events"></a>
 246         <h2>Public Events</h2>
 247         <div class="no-members">This class has no public events.</div>
 248         </div>