docs/api/Ext.core.DomHelper.html

   1 <!DOCTYPE html><html><head><title>Ext.core.DomHelper | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
   2 <style type="text/css">.head-band { display: none; }
   3 .header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
   4 .doc-tab .members .member a.more { background-color: #efefef; }
   5 </style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
   6 </head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit
   7 <a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">
   8
   9     req = {
  10         liveURL: '.',
  11         standAloneMode: true,
  12         origDocClass: 'Ext.core.DomHelper',
  13         docClass: 'Ext.core.DomHelper',
  14         docReq: 'Ext.core.DomHelper',
  15         version: '4.0',
  16         baseURL: '.',
  17         baseDocURL: '.',
  18         baseProdURL: '.'
  19     };
  20
  21     clsInfo = {};
  22
  23
  24
  25 </script>
  26
  27 <script type="text/javascript" src="../search.js"></script>
  28 <!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
  29 <script type="text/javascript" src="../class_tree.js"></script>
  30 <script type="text/javascript" src="../class_doc.js"></script>
  31 <script type="text/javascript">
  32     req.source = 'DomHelper.html#Ext-core.DomHelper';
  33     clsInfo = {"methods":["append","applyStyles","createTemplate","insertAfter","insertBefore","insertFirst","insertHtml","markup","overwrite"],"cfgs":[],"properties":["createDom","useDom"],"events":[],"subclasses":[]};
  34     Ext.onReady(function() {
  35         Ext.create('Docs.classPanel');
  36     });
  37 </script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/DomHelper.html#Ext-core.DomHelper" target="_blank">Ext.core.DomHelper</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><p>The DomHelper class provides a layer of abstraction from DOM and transparently supports creating
  38 elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates
  39 from your DOM building code.</p>
  40
  41
  42
  43
  44 <p><b><u>DomHelper element specification object</u></b></p>
  45
  46
  47 <p>A specification object is used when creating elements. Attributes of this object
  48 are assumed to be element attributes, except for 4 special attributes:
  49 <div class="mdetail-params"><ul>
  50 <li><b><tt>tag</tt></b> : <div class="sub-desc">The tag name of the element</div></li>
  51 <li><b><tt>children</tt></b> : or <tt>cn</tt><div class="sub-desc">An array of the
  52 same kind of element definition objects to be created and appended. These can be nested
  53 as deep as you want.</div></li>
  54 <li><b><tt>cls</tt></b> : <div class="sub-desc">The class attribute of the element.
  55 This will end up being either the "class" attribute on a HTML fragment or className
  56 for a DOM node, depending on whether DomHelper is using fragments or DOM.</div></li>
  57 <li><b><tt>html</tt></b> : <div class="sub-desc">The innerHTML for the element</div></li>
  58 </ul></div></p>
  59
  60
  61
  62
  63 <p><b><u>Insertion methods</u></b></p>
  64
  65
  66 <p>Commonly used insertion methods:
  67 <div class="mdetail-params"><ul>
  68 <li><b><tt><a href="Ext.core.DomHelper.html#append" rel="Ext.core.DomHelper#append" class="docClass">append</a></tt></b> : <div class="sub-desc"></div></li>
  69 <li><b><tt><a href="Ext.core.DomHelper.html#insertBefore" rel="Ext.core.DomHelper#insertBefore" class="docClass">insertBefore</a></tt></b> : <div class="sub-desc"></div></li>
  70 <li><b><tt><a href="Ext.core.DomHelper.html#insertAfter" rel="Ext.core.DomHelper#insertAfter" class="docClass">insertAfter</a></tt></b> : <div class="sub-desc"></div></li>
  71 <li><b><tt><a href="Ext.core.DomHelper.html#overwrite" rel="Ext.core.DomHelper#overwrite" class="docClass">overwrite</a></tt></b> : <div class="sub-desc"></div></li>
  72 <li><b><tt><a href="Ext.core.DomHelper.html#createTemplate" rel="Ext.core.DomHelper#createTemplate" class="docClass">createTemplate</a></tt></b> : <div class="sub-desc"></div></li>
  73 <li><b><tt><a href="Ext.core.DomHelper.html#insertHtml" rel="Ext.core.DomHelper#insertHtml" class="docClass">insertHtml</a></tt></b> : <div class="sub-desc"></div></li>
  74 </ul></div></p>
  75
  76
  77
  78
  79 <p><b><u>Example</u></b></p>
  80
  81
  82 <p>This is an example, where an unordered list with 3 children items is appended to an existing
  83 element with id <tt>'my-div'</tt>:<br>
  84
  85 <pre class="prettyprint"><code>var dh = Ext.core.DomHelper; // create shorthand alias
  86 // specification object
  87 var spec = {
  88     id: 'my-ul',
  89     tag: 'ul',
  90     cls: 'my-list',
  91     // append children after creating
  92     children: [     // may also specify 'cn' instead of 'children'
  93         {tag: 'li', id: 'item0', html: 'List Item 0'},
  94         {tag: 'li', id: 'item1', html: 'List Item 1'},
  95         {tag: 'li', id: 'item2', html: 'List Item 2'}
  96     ]
  97 };
  98 var list = dh.append(
  99     'my-div', // the context element 'my-div' can either be the id or the actual node
 100     spec      // the specification object
 101 );
 102  </code></pre></p>
 103
 104
 105 <p>Element creation specification parameters in this class may also be passed as an Array of
 106 specification objects. This can be used to insert multiple sibling nodes into an existing
 107 container very efficiently. For example, to add more list items to the example above:
 108 <pre class="prettyprint"><code>dh.append('my-ul', [
 109     {tag: 'li', id: 'item3', html: 'List Item 3'},
 110     {tag: 'li', id: 'item4', html: 'List Item 4'}
 111 ]);
 112 </code></pre></p>
 113
 114
 115
 116
 117 <p><b><u>Templating</u></b></p>
 118
 119
 120 <p>The real power is in the built-in templating. Instead of creating or appending any elements,
 121 <tt><a href="Ext.core.DomHelper.html#createTemplate" rel="Ext.core.DomHelper#createTemplate" class="docClass">createTemplate</a></tt> returns a Template object which can be used over and over to
 122 insert new elements. Revisiting the example above, we could utilize templating this time:
 123 <pre class="prettyprint"><code>// create the node
 124 var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
 125 // get template
 126 var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
 127
 128 for(var i = 0; i < 5, i++){
 129     tpl.append(list, [i]); // use template to append to the actual node
 130 }
 131 </code></pre></p>
 132 <p>An example using a template:
 133 <pre class="prettyprint"><code>var html = '<a id="{0}" href="http://192.168.1.144:3000/new/ext-js/4-0/api/{1}" class="nav">{2}</a>';
 134
 135 var tpl = new Ext.core.DomHelper.createTemplate(html);
 136 tpl.append('blog-roll', ['link1', 'http://www.edspencer.net/', "Ed&#39;s Site"]);
 137 tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin&#39;s Site"]);
 138 </code></pre></p>
 139
 140 <p>The same example using named parameters:
 141 <pre class="prettyprint"><code>var html = '<a id="{id}" href="http://192.168.1.144:3000/new/ext-js/4-0/api/{url}" class="nav">{text}</a>';
 142
 143 var tpl = new Ext.core.DomHelper.createTemplate(html);
 144 tpl.append('blog-roll', {
 145     id: 'link1',
 146     url: 'http://www.edspencer.net/',
 147     text: "Ed&#39;s Site"
 148 });
 149 tpl.append('blog-roll', {
 150     id: 'link2',
 151     url: 'http://www.dustindiaz.com/',
 152     text: "Dustin&#39;s Site"
 153 });
 154 </code></pre></p>
 155
 156 <p><b><u>Compiling Templates</u></b></p>
 157 <p>Templates are applied using regular expressions. The performance is great, but if
 158 you are adding a bunch of DOM elements using the same template, you can increase
 159 performance even further by <a href="Ext.Template.html#compile" rel="Ext.Template#compile" class="docClass">&quot;compiling&quot;</a> the template.
 160 The way "<a href="Ext.Template.html#compile" rel="Ext.Template#compile" class="docClass">compile()</a>" works is the template is parsed and
 161 broken up at the different variable points and a dynamic function is created and eval'ed.
 162 The generated function performs string concatenation of these parts and the passed
 163 variables instead of using regular expressions.
 164 <pre class="prettyprint"><code>var html = '<a id="{id}" href="http://192.168.1.144:3000/new/ext-js/4-0/api/{url}" class="nav">{text}</a>';
 165
 166 var tpl = new Ext.core.DomHelper.createTemplate(html);
 167 tpl.compile();
 168
 169 //... use template like normal
 170 </code></pre></p>
 171
 172 <p><b><u>Performance Boost</u></b></p>
 173 <p>DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead
 174 of DOM can significantly boost performance.</p>
 175 <p>Element creation specification parameters may also be strings. If <a href="Ext.core.DomHelper.html#useDom" rel="Ext.core.DomHelper#useDom" class="docClass">useDom</a> is <tt>false</tt>,
 176 then the string is used as innerHTML. If <a href="Ext.core.DomHelper.html#useDom" rel="Ext.core.DomHelper#useDom" class="docClass">useDom</a> is <tt>true</tt>, a string specification
 177 results in the creation of a text node. Usage:</p>
 178 <pre class="prettyprint"><code>Ext.core.DomHelper.useDom = true; // force it to use DOM; reduces performance
 179 </code></pre>
 180
 181 <div class="members"><div class="m-properties"><a name="properties"></a><div class="definedBy">Defined By</div><h3 class="prp p">Properties</h3><div id="property-createDom" class="member f ni"><a href="Ext.core.DomHelper.html#property-createDom" rel="property-createDom" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.core.DomHelper.html" class="definedIn docClass">Ext.core.DomHelper</a><br/><a href="../source/DomHelper.html#Ext-core.DomHelper-property-createDom" class="viewSource">view source</a></div><a name="createDom"></a><a name="property-createDom"></a><a href="Ext.core.DomHelper.html#" rel="property-createDom" class="cls expand">createDom</a><span> : Object</span></div><div class="description"><div class="short"><p>Creates new DOM element(s) without inserting them to the document.</p>
 182 </div><div class="long"><p>Creates new DOM element(s) without inserting them to the document.</p>
 183 </div></div></div><div id="property-useDom" class="member ni"><a href="Ext.core.DomHelper.html#property-useDom" rel="property-useDom" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.core.DomHelper.html" class="definedIn docClass">Ext.core.DomHelper</a><br/><a href="../source/DomHelper.html#Ext-core.DomHelper-property-useDom" class="viewSource">view source</a></div><a name="useDom"></a><a name="property-useDom"></a><a href="Ext.core.DomHelper.html#" rel="property-useDom" class="cls expand">useDom</a><span> : Boolean</span></div><div class="description"><div class="short"><p>True to force the use of DOM instead of html fragments</p>
 184 </div><div class="long"><p>True to force the use of DOM instead of html fragments</p>
 185 </div></div></div></div><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-append" class="member f ni"><a href="Ext.core.DomHelper.html#method-append" rel="method-append" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.core.DomHelper.html" class="definedIn docClass">Ext.core.DomHelper</a><br/><a href="../source/DomHelper.html#Ext-core.DomHelper-method-append" class="viewSource">view source</a></div><a name="append"></a><a name="method-append"></a><a href="Ext.core.DomHelper.html#" rel="method-append" class="cls expand">append</a>(
 186 <span class="pre">Mixed el, Object/String o, [Boolean returnElement]</span>)
 187  : HTMLElement/Ext.core.Element</div><div class="description"><div class="short"><p>Creates new DOM element(s) and appends them to el.</p>
 188 </div><div class="long"><p>Creates new DOM element(s) and appends them to el.</p>
 189 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
 190 </div></li><li><span class="pre">o</span> : Object/String<div class="sub-desc"><p>The DOM object spec (and children) or raw HTML blob</p>
 191 </div></li><li><span class="pre">returnElement</span> : Boolean<div class="sub-desc"><p>(optional) true to return a Ext.core.Element</p>
 192 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">HTMLElement/Ext.core.Element</span>&nbsp; &nbsp;<p>The new node</p>
 193 </li></ul></div></div></div><div id="method-applyStyles" class="member ni"><a href="Ext.core.DomHelper.html#method-applyStyles" rel="method-applyStyles" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.core.DomHelper.html" class="definedIn docClass">Ext.core.DomHelper</a><br/><a href="../source/DomHelper.html#Ext-core.DomHelper-method-applyStyles" class="viewSource">view source</a></div><a name="applyStyles"></a><a name="method-applyStyles"></a><a href="Ext.core.DomHelper.html#" rel="method-applyStyles" class="cls expand">applyStyles</a>(
 194 <span class="pre">String/HTMLElement el, String/Object/Function styles</span>)
 195  : void</div><div class="description"><div class="short"><p>Applies a style specification to an element.</p>
 196 </div><div class="long"><p>Applies a style specification to an element.</p>
 197 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : String/HTMLElement<div class="sub-desc"><p>The element to apply styles to</p>
 198 </div></li><li><span class="pre">styles</span> : String/Object/Function<div class="sub-desc"><p>A style specification string e.g. 'width:100px', or object in the form {width:'100px'}, or
 199 a function which returns such a specification.</p>
 200 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 201 </li></ul></div></div></div><div id="method-createTemplate" class="member ni"><a href="Ext.core.DomHelper.html#method-createTemplate" rel="method-createTemplate" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.core.DomHelper.html" class="definedIn docClass">Ext.core.DomHelper</a><br/><a href="../source/DomHelper.html#Ext-core.DomHelper-method-createTemplate" class="viewSource">view source</a></div><a name="createTemplate"></a><a name="method-createTemplate"></a><a href="Ext.core.DomHelper.html#" rel="method-createTemplate" class="cls expand">createTemplate</a>(
 202 <span class="pre">Object o</span>)
 203  : Ext.Template</div><div class="description"><div class="short"><p>Creates a new <a href="Ext.Template.html" rel="Ext.Template" class="docClass">Ext.Template</a> from the DOM object spec.</p>
 204 </div><div class="long"><p>Creates a new <a href="Ext.Template.html" rel="Ext.Template" class="docClass">Ext.Template</a> from the DOM object spec.</p>
 205 <h3 class="pa">Parameters</h3><ul><li><span class="pre">o</span> : Object<div class="sub-desc"><p>The DOM object spec (and children)</p>
 206 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Template</span>&nbsp; &nbsp;<p>The new template</p>
 207 </li></ul></div></div></div><div id="method-insertAfter" class="member ni"><a href="Ext.core.DomHelper.html#method-insertAfter" rel="method-insertAfter" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.core.DomHelper.html" class="definedIn docClass">Ext.core.DomHelper</a><br/><a href="../source/DomHelper.html#Ext-core.DomHelper-method-insertAfter" class="viewSource">view source</a></div><a name="insertAfter"></a><a name="method-insertAfter"></a><a href="Ext.core.DomHelper.html#" rel="method-insertAfter" class="cls expand">insertAfter</a>(
 208 <span class="pre">Mixed el, Object o, [Boolean returnElement]</span>)
 209  : HTMLElement/Ext.core.Element</div><div class="description"><div class="short"><p>Creates new DOM element(s) and inserts them after el.</p>
 210 </div><div class="long"><p>Creates new DOM element(s) and inserts them after el.</p>
 211 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
 212 </div></li><li><span class="pre">o</span> : Object<div class="sub-desc"><p>The DOM object spec (and children)</p>
 213 </div></li><li><span class="pre">returnElement</span> : Boolean<div class="sub-desc"><p>(optional) true to return a Ext.core.Element</p>
 214 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">HTMLElement/Ext.core.Element</span>&nbsp; &nbsp;<p>The new node</p>
 215 </li></ul></div></div></div><div id="method-insertBefore" class="member ni"><a href="Ext.core.DomHelper.html#method-insertBefore" rel="method-insertBefore" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.core.DomHelper.html" class="definedIn docClass">Ext.core.DomHelper</a><br/><a href="../source/DomHelper.html#Ext-core.DomHelper-method-insertBefore" class="viewSource">view source</a></div><a name="insertBefore"></a><a name="method-insertBefore"></a><a href="Ext.core.DomHelper.html#" rel="method-insertBefore" class="cls expand">insertBefore</a>(
 216 <span class="pre">Mixed el, Object/String o, [Boolean returnElement]</span>)
 217  : HTMLElement/Ext.core.Element</div><div class="description"><div class="short"><p>Creates new DOM element(s) and inserts them before el.</p>
 218 </div><div class="long"><p>Creates new DOM element(s) and inserts them before el.</p>
 219 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
 220 </div></li><li><span class="pre">o</span> : Object/String<div class="sub-desc"><p>The DOM object spec (and children) or raw HTML blob</p>
 221 </div></li><li><span class="pre">returnElement</span> : Boolean<div class="sub-desc"><p>(optional) true to return a Ext.core.Element</p>
 222 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">HTMLElement/Ext.core.Element</span>&nbsp; &nbsp;<p>The new node</p>
 223 </li></ul></div></div></div><div id="method-insertFirst" class="member ni"><a href="Ext.core.DomHelper.html#method-insertFirst" rel="method-insertFirst" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.core.DomHelper.html" class="definedIn docClass">Ext.core.DomHelper</a><br/><a href="../source/DomHelper.html#Ext-core.DomHelper-method-insertFirst" class="viewSource">view source</a></div><a name="insertFirst"></a><a name="method-insertFirst"></a><a href="Ext.core.DomHelper.html#" rel="method-insertFirst" class="cls expand">insertFirst</a>(
 224 <span class="pre">Mixed el, Object/String o, [Boolean returnElement]</span>)
 225  : HTMLElement/Ext.core.Element</div><div class="description"><div class="short"><p>Creates new DOM element(s) and inserts them as the first child of el.</p>
 226 </div><div class="long"><p>Creates new DOM element(s) and inserts them as the first child of el.</p>
 227 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
 228 </div></li><li><span class="pre">o</span> : Object/String<div class="sub-desc"><p>The DOM object spec (and children) or raw HTML blob</p>
 229 </div></li><li><span class="pre">returnElement</span> : Boolean<div class="sub-desc"><p>(optional) true to return a Ext.core.Element</p>
 230 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">HTMLElement/Ext.core.Element</span>&nbsp; &nbsp;<p>The new node</p>
 231 </li></ul></div></div></div><div id="method-insertHtml" class="member ni"><a href="Ext.core.DomHelper.html#method-insertHtml" rel="method-insertHtml" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.core.DomHelper.html" class="definedIn docClass">Ext.core.DomHelper</a><br/><a href="../source/DomHelper.html#Ext-core.DomHelper-method-insertHtml" class="viewSource">view source</a></div><a name="insertHtml"></a><a name="method-insertHtml"></a><a href="Ext.core.DomHelper.html#" rel="method-insertHtml" class="cls expand">insertHtml</a>(
 232 <span class="pre">String where, HTMLElement/TextNode el, String html</span>)
 233  : HTMLElement</div><div class="description"><div class="short"><p>Inserts an HTML fragment into the DOM.</p>
 234 </div><div class="long"><p>Inserts an HTML fragment into the DOM.</p>
 235 <h3 class="pa">Parameters</h3><ul><li><span class="pre">where</span> : String<div class="sub-desc"><p>Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.</p>
 236 </div></li><li><span class="pre">el</span> : HTMLElement/TextNode<div class="sub-desc"><p>The context element</p>
 237 </div></li><li><span class="pre">html</span> : String<div class="sub-desc"><p>The HTML fragment</p>
 238 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">HTMLElement</span>&nbsp; &nbsp;<p>The new node</p>
 239 </li></ul></div></div></div><div id="method-markup" class="member ni"><a href="Ext.core.DomHelper.html#method-markup" rel="method-markup" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.core.DomHelper.html" class="definedIn docClass">Ext.core.DomHelper</a><br/><a href="../source/DomHelper.html#Ext-core.DomHelper-method-markup" class="viewSource">view source</a></div><a name="markup"></a><a name="method-markup"></a><a href="Ext.core.DomHelper.html#" rel="method-markup" class="cls expand">markup</a>(
 240 <span class="pre">Object o</span>)
 241  : String</div><div class="description"><div class="short"><p>Returns the markup for the passed Element(s) config.</p>
 242 </div><div class="long"><p>Returns the markup for the passed Element(s) config.</p>
 243 <h3 class="pa">Parameters</h3><ul><li><span class="pre">o</span> : Object<div class="sub-desc"><p>The DOM object spec (and children)</p>
 244 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">String</span>&nbsp; &nbsp;
 245 </li></ul></div></div></div><div id="method-overwrite" class="member ni"><a href="Ext.core.DomHelper.html#method-overwrite" rel="method-overwrite" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.core.DomHelper.html" class="definedIn docClass">Ext.core.DomHelper</a><br/><a href="../source/DomHelper.html#Ext-core.DomHelper-method-overwrite" class="viewSource">view source</a></div><a name="overwrite"></a><a name="method-overwrite"></a><a href="Ext.core.DomHelper.html#" rel="method-overwrite" class="cls expand">overwrite</a>(
 246 <span class="pre">Mixed el, Object/String o, [Boolean returnElement]</span>)
 247  : HTMLElement/Ext.core.Element</div><div class="description"><div class="short"><p>Creates new DOM element(s) and overwrites the contents of el with them.</p>
 248 </div><div class="long"><p>Creates new DOM element(s) and overwrites the contents of el with them.</p>
 249 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
 250 </div></li><li><span class="pre">o</span> : Object/String<div class="sub-desc"><p>The DOM object spec (and children) or raw HTML blob</p>
 251 </div></li><li><span class="pre">returnElement</span> : Boolean<div class="sub-desc"><p>(optional) true to return a Ext.core.Element</p>
 252 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">HTMLElement/Ext.core.Element</span>&nbsp; &nbsp;<p>The new node</p>
 253 </li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>