Ext.DomHelper.js
62.3 KB
Ext.data.JsonP.Ext_DomHelper({"mixins":[],"code_type":"nop","inheritable":false,"component":false,"meta":{},"mixedInto":[],"uses":[],"aliases":{},"parentMixins":[],"superclasses":["Ext.Base","Ext.dom.AbstractHelper","Ext.dom.Helper"],"members":{"event":[],"property":[{"meta":{"private":true},"owner":"Ext.Base","tagname":"property","name":"$className","id":"property-S-className"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"property","name":"configMap","id":"property-configMap"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"property","name":"initConfigList","id":"property-initConfigList"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"property","name":"initConfigMap","id":"property-initConfigMap"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"property","name":"isInstance","id":"property-isInstance"},{"meta":{"protected":true},"owner":"Ext.Base","tagname":"property","name":"self","id":"property-self"},{"meta":{},"owner":"Ext.dom.Helper","tagname":"property","name":"useDom","id":"property-useDom"}],"css_var":[],"method":[{"meta":{},"owner":"Ext.dom.AbstractHelper","tagname":"method","name":"append","id":"method-append"},{"meta":{},"owner":"Ext.dom.AbstractHelper","tagname":"method","name":"applyStyles","id":"method-applyStyles"},{"meta":{"deprecated":{"text":"as of 4.1. Use {@link #callParent} instead."},"protected":true},"owner":"Ext.Base","tagname":"method","name":"callOverridden","id":"method-callOverridden"},{"meta":{"protected":true},"owner":"Ext.Base","tagname":"method","name":"callParent","id":"method-callParent"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"method","name":"configClass","id":"method-configClass"},{"meta":{"private":true},"owner":"Ext.dom.Helper","tagname":"method","name":"createContextualFragment","id":"method-createContextualFragment"},{"meta":{},"owner":"Ext.dom.Helper","tagname":"method","name":"createDom","id":"method-createDom"},{"meta":{},"owner":"Ext.dom.Helper","tagname":"method","name":"createHtml","id":"method-createHtml"},{"meta":{},"owner":"Ext.dom.Helper","tagname":"method","name":"createTemplate","id":"method-createTemplate"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"method","name":"destroy","id":"method-destroy"},{"meta":{},"owner":"Ext.dom.AbstractHelper","tagname":"method","name":"generateStyles","id":"method-generateStyles"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"method","name":"getConfig","id":"method-getConfig"},{"meta":{},"owner":"Ext.Base","tagname":"method","name":"getInitialConfig","id":"method-getInitialConfig"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"method","name":"hasConfig","id":"method-hasConfig"},{"meta":{"protected":true},"owner":"Ext.Base","tagname":"method","name":"initConfig","id":"method-initConfig"},{"meta":{},"owner":"Ext.dom.AbstractHelper","tagname":"method","name":"insertAfter","id":"method-insertAfter"},{"meta":{},"owner":"Ext.dom.AbstractHelper","tagname":"method","name":"insertBefore","id":"method-insertBefore"},{"meta":{},"owner":"Ext.dom.AbstractHelper","tagname":"method","name":"insertFirst","id":"method-insertFirst"},{"meta":{},"owner":"Ext.dom.AbstractHelper","tagname":"method","name":"insertHtml","id":"method-insertHtml"},{"meta":{"private":true},"owner":"Ext.dom.Helper","tagname":"method","name":"insertIntoTable","id":"method-insertIntoTable"},{"meta":{},"owner":"Ext.dom.AbstractHelper","tagname":"method","name":"markup","id":"method-markup"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"method","name":"onConfigUpdate","id":"method-onConfigUpdate"},{"meta":{},"owner":"Ext.dom.Helper","tagname":"method","name":"overwrite","id":"method-overwrite"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"method","name":"setConfig","id":"method-setConfig"},{"meta":{"protected":true},"owner":"Ext.Base","tagname":"method","name":"statics","id":"method-statics"}],"css_mixin":[],"cfg":[]},"tagname":"class","extends":"Ext.dom.Helper","html":"<div><pre class=\"hierarchy\"><h4>Alternate names</h4><div class='alternate-class-name'>Ext.core.DomHelper</div><h4>Hierarchy</h4><div class='subclass first-child'><a href='#!/api/Ext.Base' rel='Ext.Base' class='docClass'>Ext.Base</a><div class='subclass '><a href='#!/api/Ext.dom.AbstractHelper' rel='Ext.dom.AbstractHelper' class='docClass'>Ext.dom.AbstractHelper</a><div class='subclass '><a href='#!/api/Ext.dom.Helper' rel='Ext.dom.Helper' class='docClass'>Ext.dom.Helper</a><div class='subclass '><strong>Ext.DomHelper</strong></div></div></div></div><h4>Files</h4><div class='dependency'><a href='source/Helper.html#Ext-DomHelper' target='_blank'>Helper.js</a></div></pre><div class='doc-contents'><p>The DomHelper class provides a layer of abstraction from DOM and transparently supports creating elements via DOM or\nusing HTML fragments. It also has the ability to create HTML fragment templates from your DOM building code.</p>\n\n<h1>DomHelper element specification object</h1>\n\n<p>A specification object is used when creating elements. Attributes of this object are assumed to be element\nattributes, except for 4 special attributes:</p>\n\n<ul>\n<li><strong>tag</strong> - The tag name of the element.</li>\n<li><strong>children</strong> or <strong>cn</strong> - An array of the same kind of element definition objects to be created and appended.\nThese can be nested as deep as you want.</li>\n<li><strong>cls</strong> - The class attribute of the element. This will end up being either the \"class\" attribute on a HTML\nfragment or className for a DOM node, depending on whether DomHelper is using fragments or DOM.</li>\n<li><strong>html</strong> - The innerHTML for the element.</li>\n</ul>\n\n\n<p><strong>NOTE:</strong> For other arbitrary attributes, the value will currently <strong>not</strong> be automatically HTML-escaped prior to\nbuilding the element's HTML string. This means that if your attribute value contains special characters that would\nnot normally be allowed in a double-quoted attribute value, you <strong>must</strong> manually HTML-encode it beforehand (see\n<a href=\"#!/api/Ext.String-method-htmlEncode\" rel=\"Ext.String-method-htmlEncode\" class=\"docClass\">Ext.String.htmlEncode</a>) or risk malformed HTML being created. This behavior may change in a future release.</p>\n\n<h1>Insertion methods</h1>\n\n<p>Commonly used insertion methods:</p>\n\n<ul>\n<li><strong><a href=\"#!/api/Ext.DomHelper-method-append\" rel=\"Ext.DomHelper-method-append\" class=\"docClass\">append</a></strong></li>\n<li><strong><a href=\"#!/api/Ext.DomHelper-method-insertBefore\" rel=\"Ext.DomHelper-method-insertBefore\" class=\"docClass\">insertBefore</a></strong></li>\n<li><strong><a href=\"#!/api/Ext.DomHelper-method-insertAfter\" rel=\"Ext.DomHelper-method-insertAfter\" class=\"docClass\">insertAfter</a></strong></li>\n<li><strong><a href=\"#!/api/Ext.DomHelper-method-overwrite\" rel=\"Ext.DomHelper-method-overwrite\" class=\"docClass\">overwrite</a></strong></li>\n<li><strong><a href=\"#!/api/Ext.DomHelper-method-createTemplate\" rel=\"Ext.DomHelper-method-createTemplate\" class=\"docClass\">createTemplate</a></strong></li>\n<li><strong><a href=\"#!/api/Ext.DomHelper-method-insertHtml\" rel=\"Ext.DomHelper-method-insertHtml\" class=\"docClass\">insertHtml</a></strong></li>\n</ul>\n\n\n<h1>Example</h1>\n\n<p>This is an example, where an unordered list with 3 children items is appended to an existing element with\nid 'my-div':</p>\n\n<pre><code>var dh = <a href=\"#!/api/Ext.DomHelper\" rel=\"Ext.DomHelper\" class=\"docClass\">Ext.DomHelper</a>; // create shorthand alias\n// specification object\nvar spec = {\n id: 'my-ul',\n tag: 'ul',\n cls: 'my-list',\n // append children after creating\n children: [ // may also specify 'cn' instead of 'children'\n {tag: 'li', id: 'item0', html: 'List Item 0'},\n {tag: 'li', id: 'item1', html: 'List Item 1'},\n {tag: 'li', id: 'item2', html: 'List Item 2'}\n ]\n};\nvar list = dh.append(\n 'my-div', // the context element 'my-div' can either be the id or the actual node\n spec // the specification object\n);\n</code></pre>\n\n<p>Element creation specification parameters in this class may also be passed as an Array of specification objects. This\ncan be used to insert multiple sibling nodes into an existing container very efficiently. For example, to add more\nlist items to the example above:</p>\n\n<pre><code>dh.append('my-ul', [\n {tag: 'li', id: 'item3', html: 'List Item 3'},\n {tag: 'li', id: 'item4', html: 'List Item 4'}\n]);\n</code></pre>\n\n<h1>Templating</h1>\n\n<p>The real power is in the built-in templating. Instead of creating or appending any elements, <a href=\"#!/api/Ext.DomHelper-method-createTemplate\" rel=\"Ext.DomHelper-method-createTemplate\" class=\"docClass\">createTemplate</a>\nreturns a Template object which can be used over and over to insert new elements. Revisiting the example above, we\ncould utilize templating this time:</p>\n\n<pre><code>// create the node\nvar list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});\n// get template\nvar tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});\n\nfor(var i = 0; i < 5, i++){\n tpl.append(list, [i]); // use template to append to the actual node\n}\n</code></pre>\n\n<p>An example using a template:</p>\n\n<pre><code>var html = '<a id=\"{0}\" href=\"{1}\" class=\"nav\">{2}</a>';\n\nvar tpl = new <a href=\"#!/api/Ext.DomHelper-method-createTemplate\" rel=\"Ext.DomHelper-method-createTemplate\" class=\"docClass\">Ext.DomHelper.createTemplate</a>(html);\ntpl.append('blog-roll', ['link1', 'http://www.edspencer.net/', \"Ed's Site\"]);\ntpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', \"Dustin's Site\"]);\n</code></pre>\n\n<p>The same example using named parameters:</p>\n\n<pre><code>var html = '<a id=\"{id}\" href=\"{url}\" class=\"nav\">{text}</a>';\n\nvar tpl = new <a href=\"#!/api/Ext.DomHelper-method-createTemplate\" rel=\"Ext.DomHelper-method-createTemplate\" class=\"docClass\">Ext.DomHelper.createTemplate</a>(html);\ntpl.append('blog-roll', {\n id: 'link1',\n url: 'http://www.edspencer.net/',\n text: \"Ed's Site\"\n});\ntpl.append('blog-roll', {\n id: 'link2',\n url: 'http://www.dustindiaz.com/',\n text: \"Dustin's Site\"\n});\n</code></pre>\n\n<h1>Compiling Templates</h1>\n\n<p>Templates are applied using regular expressions. The performance is great, but if you are adding a bunch of DOM\nelements using the same template, you can increase performance even further by <a href=\"#!/api/Ext.Template-method-compile\" rel=\"Ext.Template-method-compile\" class=\"docClass\">"compiling"</a> the template. The way \"<a href=\"#!/api/Ext.Template-method-compile\" rel=\"Ext.Template-method-compile\" class=\"docClass\">compile()</a>\" works is the template is parsed and\nbroken up at the different variable points and a dynamic function is created and eval'ed. The generated function\nperforms string concatenation of these parts and the passed variables instead of using regular expressions.</p>\n\n<pre><code>var html = '<a id=\"{id}\" href=\"{url}\" class=\"nav\">{text}</a>';\n\nvar tpl = new <a href=\"#!/api/Ext.DomHelper-method-createTemplate\" rel=\"Ext.DomHelper-method-createTemplate\" class=\"docClass\">Ext.DomHelper.createTemplate</a>(html);\ntpl.compile();\n\n//... use template like normal\n</code></pre>\n\n<h1>Performance Boost</h1>\n\n<p>DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead of DOM can significantly\nboost performance.</p>\n\n<p>Element creation specification parameters may also be strings. If <a href=\"#!/api/Ext.DomHelper-property-useDom\" rel=\"Ext.DomHelper-property-useDom\" class=\"docClass\">useDom</a> is false, then the string is used\nas innerHTML. If <a href=\"#!/api/Ext.DomHelper-property-useDom\" rel=\"Ext.DomHelper-property-useDom\" class=\"docClass\">useDom</a> is true, a string specification results in the creation of a text node. Usage:</p>\n\n<pre><code><a href=\"#!/api/Ext.DomHelper-property-useDom\" rel=\"Ext.DomHelper-property-useDom\" class=\"docClass\">Ext.DomHelper.useDom</a> = true; // force it to use DOM; reduces performance\n</code></pre>\n</div><div class='members'><div class='members-section'><div class='definedBy'>Defined By</div><h3 class='members-title icon-property'>Properties</h3><div class='subsection'><div id='property-S-className' class='member first-child inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Base' rel='Ext.Base' class='defined-in docClass'>Ext.Base</a><br/><a href='source/Base.html#Ext-Base-property-S-className' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.Base-property-S-className' class='name expandable'>$className</a><span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a></span><strong class='private signature'>private</strong></div><div class='description'><div class='short'> ...</div><div class='long'>\n<p>Defaults to: <code>"Ext.Base"</code></p></div></div></div><div id='property-configMap' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Base' rel='Ext.Base' class='defined-in docClass'>Ext.Base</a><br/><a href='source/Base.html#Ext-Base-property-configMap' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.Base-property-configMap' class='name expandable'>configMap</a><span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a></span><strong class='private signature'>private</strong></div><div class='description'><div class='short'> ...</div><div class='long'>\n<p>Defaults to: <code>{}</code></p></div></div></div><div id='property-initConfigList' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Base' rel='Ext.Base' class='defined-in docClass'>Ext.Base</a><br/><a href='source/Base.html#Ext-Base-property-initConfigList' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.Base-property-initConfigList' class='name expandable'>initConfigList</a><span> : <a href=\"#!/api/Array\" rel=\"Array\" class=\"docClass\">Array</a></span><strong class='private signature'>private</strong></div><div class='description'><div class='short'> ...</div><div class='long'>\n<p>Defaults to: <code>[]</code></p></div></div></div><div id='property-initConfigMap' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Base' rel='Ext.Base' class='defined-in docClass'>Ext.Base</a><br/><a href='source/Base.html#Ext-Base-property-initConfigMap' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.Base-property-initConfigMap' class='name expandable'>initConfigMap</a><span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a></span><strong class='private signature'>private</strong></div><div class='description'><div class='short'> ...</div><div class='long'>\n<p>Defaults to: <code>{}</code></p></div></div></div><div id='property-isInstance' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Base' rel='Ext.Base' class='defined-in docClass'>Ext.Base</a><br/><a href='source/Base.html#Ext-Base-property-isInstance' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.Base-property-isInstance' class='name expandable'>isInstance</a><span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a></span><strong class='private signature'>private</strong></div><div class='description'><div class='short'> ...</div><div class='long'>\n<p>Defaults to: <code>true</code></p></div></div></div><div id='property-self' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Base' rel='Ext.Base' class='defined-in docClass'>Ext.Base</a><br/><a href='source/Base.html#Ext-Base-property-self' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.Base-property-self' class='name expandable'>self</a><span> : <a href=\"#!/api/Ext.Class\" rel=\"Ext.Class\" class=\"docClass\">Ext.Class</a></span><strong class='protected signature'>protected</strong></div><div class='description'><div class='short'>Get the reference to the current class from which this object was instantiated. ...</div><div class='long'><p>Get the reference to the current class from which this object was instantiated. Unlike <a href=\"#!/api/Ext.Base-method-statics\" rel=\"Ext.Base-method-statics\" class=\"docClass\">statics</a>,\n<code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href=\"#!/api/Ext.Base-method-statics\" rel=\"Ext.Base-method-statics\" class=\"docClass\">statics</a>\nfor a detailed comparison</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.Cat', {\n statics: {\n speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n },\n\n constructor: function() {\n alert(this.self.speciesName); // dependent on 'this'\n },\n\n clone: function() {\n return new this.self();\n }\n});\n\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.SnowLeopard', {\n extend: 'My.Cat',\n statics: {\n speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'\n }\n});\n\nvar cat = new My.Cat(); // alerts 'Cat'\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(<a href=\"#!/api/Ext-method-getClassName\" rel=\"Ext-method-getClassName\" class=\"docClass\">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard'\n</code></pre>\n</div></div></div><div id='property-useDom' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.dom.Helper' rel='Ext.dom.Helper' class='defined-in docClass'>Ext.dom.Helper</a><br/><a href='source/Helper.html#Ext-dom-Helper-property-useDom' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.dom.Helper-property-useDom' class='name expandable'>useDom</a><span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a></span></div><div class='description'><div class='short'>True to force the use of DOM instead of html fragments. ...</div><div class='long'><p>True to force the use of DOM instead of html fragments.</p>\n<p>Defaults to: <code>false</code></p></div></div></div></div></div><div class='members-section'><div class='definedBy'>Defined By</div><h3 class='members-title icon-method'>Methods</h3><div class='subsection'><div id='method-append' class='member first-child inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.dom.AbstractHelper' rel='Ext.dom.AbstractHelper' class='defined-in docClass'>Ext.dom.AbstractHelper</a><br/><a href='source/AbstractHelper.html#Ext-dom-AbstractHelper-method-append' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.dom.AbstractHelper-method-append' class='name expandable'>append</a>( <span class='pre'><a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> el, <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>/<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a> o, [<a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a> returnElement]</span> ) : HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a></div><div class='description'><div class='short'>Creates new DOM element(s) and appends them to el. ...</div><div class='long'><p>Creates new DOM element(s) and appends them to el.</p>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>el</span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a><div class='sub-desc'><p>The context element</p>\n</div></li><li><span class='pre'>o</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>/<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a><div class='sub-desc'><p>The DOM object spec (and children) or raw HTML blob</p>\n</div></li><li><span class='pre'>returnElement</span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a> (optional)<div class='sub-desc'><p>true to return a <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a></p>\n</div></li></ul><h3 class='pa'>Returns</h3><ul><li><span class='pre'>HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a></span><div class='sub-desc'><p>The new node</p>\n</div></li></ul></div></div></div><div id='method-applyStyles' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.dom.AbstractHelper' rel='Ext.dom.AbstractHelper' class='defined-in docClass'>Ext.dom.AbstractHelper</a><br/><a href='source/AbstractHelper.html#Ext-dom-AbstractHelper-method-applyStyles' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.dom.AbstractHelper-method-applyStyles' class='name expandable'>applyStyles</a>( <span class='pre'><a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/HTMLElement el, <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/<a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>/<a href=\"#!/api/Function\" rel=\"Function\" class=\"docClass\">Function</a> styles</span> )</div><div class='description'><div class='short'>Applies a style specification to an element. ...</div><div class='long'><p>Applies a style specification to an element.</p>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>el</span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/HTMLElement<div class='sub-desc'><p>The element to apply styles to</p>\n</div></li><li><span class='pre'>styles</span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/<a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>/<a href=\"#!/api/Function\" rel=\"Function\" class=\"docClass\">Function</a><div class='sub-desc'><p>A style specification string e.g. 'width:100px', or object in the form {width:'100px'}, or\na function which returns such a specification.</p>\n</div></li></ul></div></div></div><div id='method-callOverridden' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Base' rel='Ext.Base' class='defined-in docClass'>Ext.Base</a><br/><a href='source/Base.html#Ext-Base-method-callOverridden' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.Base-method-callOverridden' class='name expandable'>callOverridden</a>( <span class='pre'><a href=\"#!/api/Array\" rel=\"Array\" class=\"docClass\">Array</a>/Arguments args</span> ) : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><strong class='deprecated signature'>deprecated</strong><strong class='protected signature'>protected</strong></div><div class='description'><div class='short'>Call the original method that was previously overridden with override\n\nExt.define('My.Cat', {\n constructor: functi...</div><div class='long'><p>Call the original method that was previously overridden with <a href=\"#!/api/Ext.Base-static-method-override\" rel=\"Ext.Base-static-method-override\" class=\"docClass\">override</a></p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.Cat', {\n constructor: function() {\n alert(\"I'm a cat!\");\n }\n});\n\nMy.Cat.override({\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n this.callOverridden();\n\n alert(\"Meeeeoooowwww\");\n }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n // alerts \"I'm a cat!\"\n // alerts \"Meeeeoooowwww\"\n</code></pre>\n <div class='signature-box deprecated'>\n <p>This method has been <strong>deprecated</strong> </p>\n <p>as of 4.1. Use <a href=\"#!/api/Ext.Base-method-callParent\" rel=\"Ext.Base-method-callParent\" class=\"docClass\">callParent</a> instead.</p>\n\n </div>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>args</span> : <a href=\"#!/api/Array\" rel=\"Array\" class=\"docClass\">Array</a>/Arguments<div class='sub-desc'><p>The arguments, either an array or the <code>arguments</code> object\nfrom the current method, for example: <code>this.callOverridden(arguments)</code></p>\n</div></li></ul><h3 class='pa'>Returns</h3><ul><li><span class='pre'><a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a></span><div class='sub-desc'><p>Returns the result of calling the overridden method</p>\n</div></li></ul></div></div></div><div id='method-callParent' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Base' rel='Ext.Base' class='defined-in docClass'>Ext.Base</a><br/><a href='source/Base.html#Ext-Base-method-callParent' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.Base-method-callParent' class='name expandable'>callParent</a>( <span class='pre'><a href=\"#!/api/Array\" rel=\"Array\" class=\"docClass\">Array</a>/Arguments args</span> ) : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><strong class='protected signature'>protected</strong></div><div class='description'><div class='short'>Call the \"parent\" method of the current method. ...</div><div class='long'><p>Call the \"parent\" method of the current method. That is the method previously\noverridden by derivation or by an override (see <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>).</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.Base', {\n constructor: function (x) {\n this.x = x;\n },\n\n statics: {\n method: function (x) {\n return x;\n }\n }\n });\n\n <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.Derived', {\n extend: 'My.Base',\n\n constructor: function () {\n this.callParent([21]);\n }\n });\n\n var obj = new My.Derived();\n\n alert(obj.x); // alerts 21\n</code></pre>\n\n<p>This can be used with an override as follows:</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.DerivedOverride', {\n override: 'My.Derived',\n\n constructor: function (x) {\n this.callParent([x*2]); // calls original My.Derived constructor\n }\n });\n\n var obj = new My.Derived();\n\n alert(obj.x); // now alerts 42\n</code></pre>\n\n<p>This also works with static methods.</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.Derived2', {\n extend: 'My.Base',\n\n statics: {\n method: function (x) {\n return this.callParent([x*2]); // calls My.Base.method\n }\n }\n });\n\n alert(My.Base.method(10); // alerts 10\n alert(My.Derived2.method(10); // alerts 20\n</code></pre>\n\n<p>Lastly, it also works with overridden static methods.</p>\n\n<pre><code> <a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.Derived2Override', {\n override: 'My.Derived2',\n\n statics: {\n method: function (x) {\n return this.callParent([x*2]); // calls My.Derived2.method\n }\n }\n });\n\n alert(My.Derived2.method(10); // now alerts 40\n</code></pre>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>args</span> : <a href=\"#!/api/Array\" rel=\"Array\" class=\"docClass\">Array</a>/Arguments<div class='sub-desc'><p>The arguments, either an array or the <code>arguments</code> object\nfrom the current method, for example: <code>this.callParent(arguments)</code></p>\n</div></li></ul><h3 class='pa'>Returns</h3><ul><li><span class='pre'><a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a></span><div class='sub-desc'><p>Returns the result of calling the parent method</p>\n</div></li></ul></div></div></div><div id='method-configClass' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Base' rel='Ext.Base' class='defined-in docClass'>Ext.Base</a><br/><a href='source/Base.html#Ext-Base-method-configClass' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.Base-method-configClass' class='name expandable'>configClass</a>( <span class='pre'></span> )<strong class='private signature'>private</strong></div><div class='description'><div class='short'> ...</div><div class='long'>\n</div></div></div><div id='method-createContextualFragment' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.dom.Helper' rel='Ext.dom.Helper' class='defined-in docClass'>Ext.dom.Helper</a><br/><a href='source/Helper.html#Ext-dom-Helper-method-createContextualFragment' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.dom.Helper-method-createContextualFragment' class='name expandable'>createContextualFragment</a>( <span class='pre'><a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> html</span> )<strong class='private signature'>private</strong></div><div class='description'><div class='short'>Fix for IE9 createContextualFragment missing method ...</div><div class='long'><p>Fix for IE9 createContextualFragment missing method</p>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>html</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'>\n</div></li></ul></div></div></div><div id='method-createDom' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.dom.Helper' rel='Ext.dom.Helper' class='defined-in docClass'>Ext.dom.Helper</a><br/><a href='source/Helper.html#Ext-dom-Helper-method-createDom' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.dom.Helper-method-createDom' class='name expandable'>createDom</a>( <span class='pre'><a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>/<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a> o</span> ) : HTMLElement</div><div class='description'><div class='short'>Creates new DOM element(s) without inserting them to the document. ...</div><div class='long'><p>Creates new DOM element(s) without inserting them to the document.</p>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>o</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>/<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a><div class='sub-desc'><p>The DOM object spec (and children) or raw HTML blob</p>\n</div></li></ul><h3 class='pa'>Returns</h3><ul><li><span class='pre'>HTMLElement</span><div class='sub-desc'><p>The new uninserted node</p>\n</div></li></ul></div></div></div><div id='method-createHtml' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.dom.Helper' rel='Ext.dom.Helper' class='defined-in docClass'>Ext.dom.Helper</a><br/><a href='source/Helper.html#Ext-dom-Helper-method-createHtml' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.dom.Helper-method-createHtml' class='name expandable'>createHtml</a>( <span class='pre'><a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> spec</span> ) : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a></div><div class='description'><div class='short'>Alias for markup. ...</div><div class='long'><p>Alias for <a href=\"#!/api/Ext.dom.Helper-method-markup\" rel=\"Ext.dom.Helper-method-markup\" class=\"docClass\">markup</a>.</p>\n\n<p>Returns the markup for the passed Element(s) config.</p>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>spec</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'><p>The DOM object spec (and children)</p>\n</div></li></ul><h3 class='pa'>Returns</h3><ul><li><span class='pre'><a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a></span><div class='sub-desc'>\n</div></li></ul></div></div></div><div id='method-createTemplate' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.dom.Helper' rel='Ext.dom.Helper' class='defined-in docClass'>Ext.dom.Helper</a><br/><a href='source/Helper.html#Ext-dom-Helper-method-createTemplate' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.dom.Helper-method-createTemplate' class='name expandable'>createTemplate</a>( <span class='pre'><a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> o</span> ) : <a href=\"#!/api/Ext.Template\" rel=\"Ext.Template\" class=\"docClass\">Ext.Template</a></div><div class='description'><div class='short'>Creates a new Ext.Template from the DOM object spec. ...</div><div class='long'><p>Creates a new <a href=\"#!/api/Ext.Template\" rel=\"Ext.Template\" class=\"docClass\">Ext.Template</a> from the DOM object spec.</p>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>o</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'><p>The DOM object spec (and children)</p>\n</div></li></ul><h3 class='pa'>Returns</h3><ul><li><span class='pre'><a href=\"#!/api/Ext.Template\" rel=\"Ext.Template\" class=\"docClass\">Ext.Template</a></span><div class='sub-desc'><p>The new template</p>\n</div></li></ul></div></div></div><div id='method-destroy' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Base' rel='Ext.Base' class='defined-in docClass'>Ext.Base</a><br/><a href='source/Base.html#Ext-Base-method-destroy' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.Base-method-destroy' class='name expandable'>destroy</a>( <span class='pre'></span> )<strong class='private signature'>private</strong></div><div class='description'><div class='short'> ...</div><div class='long'>\n<p>Overrides: <a href='#!/api/Ext.AbstractComponent-method-destroy' rel='Ext.AbstractComponent-method-destroy' class='docClass'>Ext.AbstractComponent.destroy</a>, <a href='#!/api/Ext.AbstractPlugin-method-destroy' rel='Ext.AbstractPlugin-method-destroy' class='docClass'>Ext.AbstractPlugin.destroy</a>, <a href='#!/api/Ext.layout.Layout-method-destroy' rel='Ext.layout.Layout-method-destroy' class='docClass'>Ext.layout.Layout.destroy</a></p></div></div></div><div id='method-generateStyles' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.dom.AbstractHelper' rel='Ext.dom.AbstractHelper' class='defined-in docClass'>Ext.dom.AbstractHelper</a><br/><a href='source/AbstractHelper.html#Ext-dom-AbstractHelper-method-generateStyles' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.dom.AbstractHelper-method-generateStyles' class='name expandable'>generateStyles</a>( <span class='pre'><a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> styles, [<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>[] buffer]</span> ) : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>[]</div><div class='description'><div class='short'>Converts the styles from the given object to text. ...</div><div class='long'><p>Converts the styles from the given object to text. The styles are CSS style names\nwith their associated value.</p>\n\n<p>The basic form of this method returns a string:</p>\n\n<pre><code> var s = <a href=\"#!/api/Ext.DomHelper-method-generateStyles\" rel=\"Ext.DomHelper-method-generateStyles\" class=\"docClass\">Ext.DomHelper.generateStyles</a>({\n backgroundColor: 'red'\n });\n\n // s = 'background-color:red;'\n</code></pre>\n\n<p>Alternatively, this method can append to an output array.</p>\n\n<pre><code> var buf = [];\n\n ...\n\n <a href=\"#!/api/Ext.DomHelper-method-generateStyles\" rel=\"Ext.DomHelper-method-generateStyles\" class=\"docClass\">Ext.DomHelper.generateStyles</a>({\n backgroundColor: 'red'\n }, buf);\n</code></pre>\n\n<p>In this case, the style text is pushed on to the array and the array is returned.</p>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>styles</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'><p>The object describing the styles.</p>\n</div></li><li><span class='pre'>buffer</span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>[] (optional)<div class='sub-desc'><p>The output buffer.</p>\n</div></li></ul><h3 class='pa'>Returns</h3><ul><li><span class='pre'><a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>[]</span><div class='sub-desc'><p>If buffer is passed, it is returned. Otherwise the style\nstring is returned.</p>\n</div></li></ul></div></div></div><div id='method-getConfig' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Base' rel='Ext.Base' class='defined-in docClass'>Ext.Base</a><br/><a href='source/Base.html#Ext-Base-method-getConfig' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.Base-method-getConfig' class='name expandable'>getConfig</a>( <span class='pre'><a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> name</span> )<strong class='private signature'>private</strong></div><div class='description'><div class='short'> ...</div><div class='long'>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>name</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'>\n</div></li></ul></div></div></div><div id='method-getInitialConfig' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Base' rel='Ext.Base' class='defined-in docClass'>Ext.Base</a><br/><a href='source/Base.html#Ext-Base-method-getInitialConfig' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.Base-method-getInitialConfig' class='name expandable'>getInitialConfig</a>( <span class='pre'>[<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a> name]</span> ) : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>/Mixed</div><div class='description'><div class='short'>Returns the initial configuration passed to constructor when instantiating\nthis class. ...</div><div class='long'><p>Returns the initial configuration passed to constructor when instantiating\nthis class.</p>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>name</span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a> (optional)<div class='sub-desc'><p>Name of the config option to return.</p>\n</div></li></ul><h3 class='pa'>Returns</h3><ul><li><span class='pre'><a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>/Mixed</span><div class='sub-desc'><p>The full config object or a single config value\nwhen <code>name</code> parameter specified.</p>\n</div></li></ul></div></div></div><div id='method-hasConfig' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Base' rel='Ext.Base' class='defined-in docClass'>Ext.Base</a><br/><a href='source/Base.html#Ext-Base-method-hasConfig' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.Base-method-hasConfig' class='name expandable'>hasConfig</a>( <span class='pre'><a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> config</span> )<strong class='private signature'>private</strong></div><div class='description'><div class='short'> ...</div><div class='long'>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>config</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'>\n</div></li></ul></div></div></div><div id='method-initConfig' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Base' rel='Ext.Base' class='defined-in docClass'>Ext.Base</a><br/><a href='source/Base.html#Ext-Base-method-initConfig' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.Base-method-initConfig' class='name expandable'>initConfig</a>( <span class='pre'><a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> config</span> ) : <a href=\"#!/api/Ext.Base\" rel=\"Ext.Base\" class=\"docClass\">Ext.Base</a><strong class='protected signature'>protected</strong></div><div class='description'><div class='short'>Initialize configuration for this class. ...</div><div class='long'><p>Initialize configuration for this class. a typical example:</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.awesome.Class', {\n // The default config\n config: {\n name: 'Awesome',\n isAwesome: true\n },\n\n constructor: function(config) {\n this.initConfig(config);\n }\n});\n\nvar awesome = new My.awesome.Class({\n name: 'Super Awesome'\n});\n\nalert(awesome.getName()); // 'Super Awesome'\n</code></pre>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>config</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'>\n</div></li></ul><h3 class='pa'>Returns</h3><ul><li><span class='pre'><a href=\"#!/api/Ext.Base\" rel=\"Ext.Base\" class=\"docClass\">Ext.Base</a></span><div class='sub-desc'><p>this</p>\n</div></li></ul></div></div></div><div id='method-insertAfter' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.dom.AbstractHelper' rel='Ext.dom.AbstractHelper' class='defined-in docClass'>Ext.dom.AbstractHelper</a><br/><a href='source/AbstractHelper.html#Ext-dom-AbstractHelper-method-insertAfter' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.dom.AbstractHelper-method-insertAfter' class='name expandable'>insertAfter</a>( <span class='pre'><a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> el, <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> o, [<a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a> returnElement]</span> ) : HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a></div><div class='description'><div class='short'>Creates new DOM element(s) and inserts them after el. ...</div><div class='long'><p>Creates new DOM element(s) and inserts them after el.</p>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>el</span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a><div class='sub-desc'><p>The context element</p>\n</div></li><li><span class='pre'>o</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'><p>The DOM object spec (and children)</p>\n</div></li><li><span class='pre'>returnElement</span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a> (optional)<div class='sub-desc'><p>true to return a <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a></p>\n</div></li></ul><h3 class='pa'>Returns</h3><ul><li><span class='pre'>HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a></span><div class='sub-desc'><p>The new node</p>\n</div></li></ul></div></div></div><div id='method-insertBefore' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.dom.AbstractHelper' rel='Ext.dom.AbstractHelper' class='defined-in docClass'>Ext.dom.AbstractHelper</a><br/><a href='source/AbstractHelper.html#Ext-dom-AbstractHelper-method-insertBefore' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.dom.AbstractHelper-method-insertBefore' class='name expandable'>insertBefore</a>( <span class='pre'><a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> el, <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>/<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a> o, [<a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a> returnElement]</span> ) : HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a></div><div class='description'><div class='short'>Creates new DOM element(s) and inserts them before el. ...</div><div class='long'><p>Creates new DOM element(s) and inserts them before el.</p>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>el</span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a><div class='sub-desc'><p>The context element</p>\n</div></li><li><span class='pre'>o</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>/<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a><div class='sub-desc'><p>The DOM object spec (and children) or raw HTML blob</p>\n</div></li><li><span class='pre'>returnElement</span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a> (optional)<div class='sub-desc'><p>true to return a <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a></p>\n</div></li></ul><h3 class='pa'>Returns</h3><ul><li><span class='pre'>HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a></span><div class='sub-desc'><p>The new node</p>\n</div></li></ul></div></div></div><div id='method-insertFirst' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.dom.AbstractHelper' rel='Ext.dom.AbstractHelper' class='defined-in docClass'>Ext.dom.AbstractHelper</a><br/><a href='source/AbstractHelper.html#Ext-dom-AbstractHelper-method-insertFirst' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.dom.AbstractHelper-method-insertFirst' class='name expandable'>insertFirst</a>( <span class='pre'><a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> el, <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>/<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a> o, [<a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a> returnElement]</span> ) : HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a></div><div class='description'><div class='short'>Creates new DOM element(s) and inserts them as the first child of el. ...</div><div class='long'><p>Creates new DOM element(s) and inserts them as the first child of el.</p>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>el</span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a><div class='sub-desc'><p>The context element</p>\n</div></li><li><span class='pre'>o</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>/<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a><div class='sub-desc'><p>The DOM object spec (and children) or raw HTML blob</p>\n</div></li><li><span class='pre'>returnElement</span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a> (optional)<div class='sub-desc'><p>true to return a <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a></p>\n</div></li></ul><h3 class='pa'>Returns</h3><ul><li><span class='pre'>HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a></span><div class='sub-desc'><p>The new node</p>\n</div></li></ul></div></div></div><div id='method-insertHtml' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.dom.AbstractHelper' rel='Ext.dom.AbstractHelper' class='defined-in docClass'>Ext.dom.AbstractHelper</a><br/><a href='source/AbstractHelper.html#Ext-dom-AbstractHelper-method-insertHtml' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.dom.AbstractHelper-method-insertHtml' class='name expandable'>insertHtml</a>( <span class='pre'><a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a> where, HTMLElement/TextNode el, <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a> html</span> ) : HTMLElement</div><div class='description'><div class='short'>Inserts an HTML fragment into the DOM. ...</div><div class='long'><p>Inserts an HTML fragment into the DOM.</p>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>where</span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a><div class='sub-desc'><p>Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.</p>\n\n<p>For example take the following HTML: <code><div>Contents</div></code></p>\n\n<p>Using different <code>where</code> values inserts element to the following places:</p>\n\n<ul>\n<li>beforeBegin: <code><HERE><div>Contents</div></code></li>\n<li>afterBegin: <code><div><HERE>Contents</div></code></li>\n<li>beforeEnd: <code><div>Contents<HERE></div></code></li>\n<li>afterEnd: <code><div>Contents</div><HERE></code></li>\n</ul>\n\n</div></li><li><span class='pre'>el</span> : HTMLElement/TextNode<div class='sub-desc'><p>The context element</p>\n</div></li><li><span class='pre'>html</span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a><div class='sub-desc'><p>The HTML fragment</p>\n</div></li></ul><h3 class='pa'>Returns</h3><ul><li><span class='pre'>HTMLElement</span><div class='sub-desc'><p>The new node</p>\n</div></li></ul></div></div></div><div id='method-insertIntoTable' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.dom.Helper' rel='Ext.dom.Helper' class='defined-in docClass'>Ext.dom.Helper</a><br/><a href='source/Helper.html#Ext-dom-Helper-method-insertIntoTable' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.dom.Helper-method-insertIntoTable' class='name expandable'>insertIntoTable</a>( <span class='pre'><a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> tag, <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> where, <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> destinationEl, <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> html</span> )<strong class='private signature'>private</strong></div><div class='description'><div class='short'>Nasty code for IE's broken table implementation ...</div><div class='long'><p>Nasty code for IE's broken table implementation</p>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>tag</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'>\n</div></li><li><span class='pre'>where</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'>\n</div></li><li><span class='pre'>destinationEl</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'>\n</div></li><li><span class='pre'>html</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'>\n</div></li></ul></div></div></div><div id='method-markup' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.dom.AbstractHelper' rel='Ext.dom.AbstractHelper' class='defined-in docClass'>Ext.dom.AbstractHelper</a><br/><a href='source/AbstractHelper.html#Ext-dom-AbstractHelper-method-markup' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.dom.AbstractHelper-method-markup' class='name expandable'>markup</a>( <span class='pre'><a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> spec</span> ) : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a></div><div class='description'><div class='short'>Returns the markup for the passed Element(s) config. ...</div><div class='long'><p>Returns the markup for the passed Element(s) config.</p>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>spec</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'><p>The DOM object spec (and children)</p>\n</div></li></ul><h3 class='pa'>Returns</h3><ul><li><span class='pre'><a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a></span><div class='sub-desc'>\n</div></li></ul></div></div></div><div id='method-onConfigUpdate' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Base' rel='Ext.Base' class='defined-in docClass'>Ext.Base</a><br/><a href='source/Base.html#Ext-Base-method-onConfigUpdate' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.Base-method-onConfigUpdate' class='name expandable'>onConfigUpdate</a>( <span class='pre'><a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> names, <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> callback, <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> scope</span> )<strong class='private signature'>private</strong></div><div class='description'><div class='short'> ...</div><div class='long'>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>names</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'>\n</div></li><li><span class='pre'>callback</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'>\n</div></li><li><span class='pre'>scope</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'>\n</div></li></ul></div></div></div><div id='method-overwrite' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.dom.Helper' rel='Ext.dom.Helper' class='defined-in docClass'>Ext.dom.Helper</a><br/><a href='source/Helper.html#Ext-dom-Helper-method-overwrite' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.dom.Helper-method-overwrite' class='name expandable'>overwrite</a>( <span class='pre'><a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a> el, <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>/<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a> o, [<a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a> returnElement]</span> ) : HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a></div><div class='description'><div class='short'>Creates new DOM element(s) and overwrites the contents of el with them. ...</div><div class='long'><p>Creates new DOM element(s) and overwrites the contents of el with them.</p>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>el</span> : <a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a>/HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a><div class='sub-desc'><p>The context element</p>\n</div></li><li><span class='pre'>o</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a>/<a href=\"#!/api/String\" rel=\"String\" class=\"docClass\">String</a><div class='sub-desc'><p>The DOM object spec (and children) or raw HTML blob</p>\n</div></li><li><span class='pre'>returnElement</span> : <a href=\"#!/api/Boolean\" rel=\"Boolean\" class=\"docClass\">Boolean</a> (optional)<div class='sub-desc'><p>true to return an <a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a></p>\n</div></li></ul><h3 class='pa'>Returns</h3><ul><li><span class='pre'>HTMLElement/<a href=\"#!/api/Ext.dom.Element\" rel=\"Ext.dom.Element\" class=\"docClass\">Ext.Element</a></span><div class='sub-desc'><p>The new node</p>\n</div></li></ul><p>Overrides: <a href='#!/api/Ext.dom.AbstractHelper-method-overwrite' rel='Ext.dom.AbstractHelper-method-overwrite' class='docClass'>Ext.dom.AbstractHelper.overwrite</a></p></div></div></div><div id='method-setConfig' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Base' rel='Ext.Base' class='defined-in docClass'>Ext.Base</a><br/><a href='source/Base.html#Ext-Base-method-setConfig' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.Base-method-setConfig' class='name expandable'>setConfig</a>( <span class='pre'><a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> config, <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a> applyIfNotSet</span> )<strong class='private signature'>private</strong></div><div class='description'><div class='short'> ...</div><div class='long'>\n<h3 class=\"pa\">Parameters</h3><ul><li><span class='pre'>config</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'>\n</div></li><li><span class='pre'>applyIfNotSet</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class='sub-desc'>\n</div></li></ul></div></div></div><div id='method-statics' class='member inherited'><a href='#' class='side expandable'><span> </span></a><div class='title'><div class='meta'><a href='#!/api/Ext.Base' rel='Ext.Base' class='defined-in docClass'>Ext.Base</a><br/><a href='source/Base.html#Ext-Base-method-statics' target='_blank' class='view-source'>view source</a></div><a href='#!/api/Ext.Base-method-statics' class='name expandable'>statics</a>( <span class='pre'></span> ) : <a href=\"#!/api/Ext.Class\" rel=\"Ext.Class\" class=\"docClass\">Ext.Class</a><strong class='protected signature'>protected</strong></div><div class='description'><div class='short'>Get the reference to the class from which this object was instantiated. ...</div><div class='long'><p>Get the reference to the class from which this object was instantiated. Note that unlike <a href=\"#!/api/Ext.Base-property-self\" rel=\"Ext.Base-property-self\" class=\"docClass\">self</a>,\n<code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what\n<code>this</code> points to during run-time</p>\n\n<pre><code><a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.Cat', {\n statics: {\n totalCreated: 0,\n speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n },\n\n constructor: function() {\n var statics = this.statics();\n\n alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to\n // equivalent to: My.Cat.speciesName\n\n alert(this.self.speciesName); // dependent on 'this'\n\n statics.totalCreated++;\n },\n\n clone: function() {\n var cloned = new this.self; // dependent on 'this'\n\n cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName\n\n return cloned;\n }\n});\n\n\n<a href=\"#!/api/Ext-method-define\" rel=\"Ext-method-define\" class=\"docClass\">Ext.define</a>('My.SnowLeopard', {\n extend: 'My.Cat',\n\n statics: {\n speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'\n },\n\n constructor: function() {\n this.callParent();\n }\n});\n\nvar cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat'\n\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(<a href=\"#!/api/Ext-method-getClassName\" rel=\"Ext-method-getClassName\" class=\"docClass\">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard'\nalert(clone.groupName); // alerts 'Cat'\n\nalert(My.Cat.totalCreated); // alerts 3\n</code></pre>\n<h3 class='pa'>Returns</h3><ul><li><span class='pre'><a href=\"#!/api/Ext.Class\" rel=\"Ext.Class\" class=\"docClass\">Ext.Class</a></span><div class='sub-desc'>\n</div></li></ul></div></div></div></div></div></div></div>","subclasses":[],"name":"Ext.DomHelper","alternateClassNames":["Ext.core.DomHelper"],"inheritdoc":null,"files":[{"href":"Helper.html#Ext-DomHelper","filename":"Helper.js"}],"html_meta":{},"singleton":true,"id":"class-Ext.DomHelper","statics":{"property":[],"event":[],"css_var":[],"method":[],"css_mixin":[],"cfg":[]},"requires":[]});