Ext.data.JsonP.Ext_DomHelper({"alternateClassNames":["Ext.core.DomHelper"],"aliases":{},"enum":null,"parentMixins":[],"tagname":"class","subclasses":[],"extends":"Ext.dom.Helper","uses":[],"html":"
Alternate names
Ext.core.DomHelper
Hierarchy
Ext.Base
Ext.dom.AbstractHelper
Ext.dom.Helper
Ext.DomHelper
Files
Helper.js

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.

\n\n

DomHelper element specification object

\n\n

A specification object is used when creating elements. Attributes of this object are assumed to be element\nattributes, except for 4 special attributes:

\n\n\n\n\n

NOTE: For other arbitrary attributes, the value will currently not 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 must manually HTML-encode it beforehand (see\nExt.String.htmlEncode) or risk malformed HTML being created. This behavior may change in a future release.

\n\n

Insertion methods

\n\n

Commonly used insertion methods:

\n\n\n\n\n

Example

\n\n

This is an example, where an unordered list with 3 children items is appended to an existing element with\nid 'my-div':

\n\n
var dh = Ext.DomHelper; // 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
\n\n

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:

\n\n
dh.append('my-ul', [\n    {tag: 'li', id: 'item3', html: 'List Item 3'},\n    {tag: 'li', id: 'item4', html: 'List Item 4'}\n]);\n
\n\n

Templating

\n\n

The real power is in the built-in templating. Instead of creating or appending any elements, createTemplate\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:

\n\n
// 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
\n\n

An example using a template:

\n\n
var html = '<a id=\"{0}\" href=\"{1}\" class=\"nav\">{2}</a>';\n\nvar tpl = new Ext.DomHelper.createTemplate(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
\n\n

The same example using named parameters:

\n\n
var html = '<a id=\"{id}\" href=\"{url}\" class=\"nav\">{text}</a>';\n\nvar tpl = new Ext.DomHelper.createTemplate(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
\n\n

Compiling Templates

\n\n

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 "compiling" the template. The way \"compile()\" 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.

\n\n
var html = '<a id=\"{id}\" href=\"{url}\" class=\"nav\">{text}</a>';\n\nvar tpl = new Ext.DomHelper.createTemplate(html);\ntpl.compile();\n\n//... use template like normal\n
\n\n

Performance Boost

\n\n

DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead of DOM can significantly\nboost performance.

\n\n

Element creation specification parameters may also be strings. If useDom is false, then the string is used\nas innerHTML. If useDom is true, a string specification results in the creation of a text node. Usage:

\n\n
Ext.DomHelper.useDom = true; // force it to use DOM; reduces performance\n
\n

Properties

Defined By

Instance Properties

Ext.Base
view source
: Stringprivate
...
\n

Defaults to: 'Ext.Base'

Ext.dom.AbstractHelper
view source
: Objectprivate
Since cls & for are reserved words, we need to transform them ...

Since cls & for are reserved words, we need to transform them

\n

Defaults to: {cls: 'class', htmlFor: 'for'}

Ext.dom.AbstractHelper
view source
: Objectprivate
...
\n

Defaults to: {}

Ext.dom.AbstractHelper
view source
: RegExpprivate
...
\n

Defaults to: /^(?:tag|children|cn|html|tpl|tplData)$/i

Ext.Base
view source
: Objectprivate
...
\n

Defaults to: {}

Ext.dom.AbstractHelper
view source
decamelizeName : Objectprivate
\n
\n
Ext.dom.AbstractHelper
view source
: RegExpprivate
...
\n

Defaults to: /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i

Ext.dom.AbstractHelper
view source
: RegExpprivate
...
\n

Defaults to: /end/i

Ext.Base
view source
: Arrayprivate
...
\n

Defaults to: []

Ext.Base
view source
: Objectprivate
...
\n

Defaults to: {}

Ext.Base
view source
: Booleanprivate
...
\n

Defaults to: true

Ext.Base
view source
: Ext.Classprotected
Get the reference to the current class from which this object was instantiated. ...

Get the reference to the current class from which this object was instantiated. Unlike statics,\nthis.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics\nfor a detailed comparison

\n\n
Ext.define('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\nExt.define('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(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'\n
\n
Ext.dom.AbstractHelper
view source
: RegExpprivate
...
\n

Defaults to: /\\s*(?::|;)\\s*/

Ext.dom.Helper
view source
: Boolean
True to force the use of DOM instead of html fragments. ...

True to force the use of DOM instead of html fragments.

\n

Defaults to: false

Defined By

Static Properties

Ext.Base
view source
: Arrayprivatestatic
...
\n

Defaults to: []

Methods

Defined By

Instance Methods

Ext.dom.AbstractHelper
view source
( el, o, [returnElement] ) : HTMLElement/Ext.Element
Creates new DOM element(s) and appends them to el. ...

Creates new DOM element(s) and appends them to el.

\n

Parameters

Returns

Ext.dom.AbstractHelper
view source
( el, styles )
Applies a style specification to an element. ...

Applies a style specification to an element.

\n

Parameters

  • el : String/HTMLElement

    The element to apply styles to

    \n
  • styles : String/Object/Function

    A style specification string e.g. 'width:100px', or object in the form {width:'100px'}, or\na function which returns such a specification.

    \n
Ext.Base
view source
( args ) : Objectdeprecatedprotected
Call the original method that was previously overridden with override\n\nExt.define('My.Cat', {\n constructor: functi...

Call the original method that was previously overridden with override

\n\n
Ext.define('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
\n
\n

This method has been deprecated

\n

as of 4.1. Use callParent instead.

\n\n
\n

Parameters

  • args : Array/Arguments

    The arguments, either an array or the arguments object\nfrom the current method, for example: this.callOverridden(arguments)

    \n

Returns

  • Object

    Returns the result of calling the overridden method

    \n
Ext.Base
view source
( args ) : Objectprotected
Call the \"parent\" method of the current method. ...

Call the \"parent\" method of the current method. That is the method previously\noverridden by derivation or by an override (see Ext.define).

\n\n
 Ext.define('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 Ext.define('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
\n\n

This can be used with an override as follows:

\n\n
 Ext.define('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
\n\n

This also works with static methods.

\n\n
 Ext.define('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
\n\n

Lastly, it also works with overridden static methods.

\n\n
 Ext.define('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
\n\n

To override a method and replace it and also call the superclass method, use\ncallSuper. This is often done to patch a method to fix a bug.

\n

Parameters

  • args : Array/Arguments

    The arguments, either an array or the arguments object\nfrom the current method, for example: this.callParent(arguments)

    \n

Returns

  • Object

    Returns the result of calling the parent method

    \n
Ext.Base
view source
( args ) : Objectprotected
This method is used by an override to call the superclass method but bypass any\noverridden method. ...

This method is used by an override to call the superclass method but bypass any\noverridden method. This is often done to \"patch\" a method that contains a bug\nbut for whatever reason cannot be fixed directly.

\n\n

Consider:

\n\n
 Ext.define('Ext.some.Class', {\n     method: function () {\n         console.log('Good');\n     }\n });\n\n Ext.define('Ext.some.DerivedClass', {\n     method: function () {\n         console.log('Bad');\n\n         // ... logic but with a bug ...\n\n         this.callParent();\n     }\n });\n
\n\n

To patch the bug in DerivedClass.method, the typical solution is to create an\noverride:

\n\n
 Ext.define('App.paches.DerivedClass', {\n     override: 'Ext.some.DerivedClass',\n\n     method: function () {\n         console.log('Fixed');\n\n         // ... logic but with bug fixed ...\n\n         this.callSuper();\n     }\n });\n
\n\n

The patch method cannot use callParent to call the superclass method since\nthat would call the overridden method containing the bug. In other words, the\nabove patch would only produce \"Fixed\" then \"Good\" in the console log, whereas,\nusing callParent would produce \"Fixed\" then \"Bad\" then \"Good\".

\n

Parameters

  • args : Array/Arguments

    The arguments, either an array or the arguments object\nfrom the current method, for example: this.callSuper(arguments)

    \n

Returns

  • Object

    Returns the result of calling the superclass method

    \n
Ext.Base
view source
( )private
...
\n
Ext.dom.Helper
view source
( html )private
Fix for IE9 createContextualFragment missing method ...

Fix for IE9 createContextualFragment missing method

\n

Parameters

Ext.dom.Helper
view source
( o ) : HTMLElement
Creates new DOM element(s) without inserting them to the document. ...

Creates new DOM element(s) without inserting them to the document.

\n

Parameters

  • o : Object/String

    The DOM object spec (and children) or raw HTML blob

    \n

Returns

  • HTMLElement

    The new uninserted node

    \n
Ext.dom.Helper
view source
( spec ) : String
Alias for markup. ...

Alias for markup.

\n\n

Returns the markup for the passed Element(s) config.

\n

Parameters

  • spec : Object

    The DOM object spec (and children)

    \n

Returns

Ext.dom.Helper
view source
( o ) : Ext.Template
Creates a new Ext.Template from the DOM object spec. ...

Creates a new Ext.Template from the DOM object spec.

\n

Parameters

  • o : Object

    The DOM object spec (and children)

    \n

Returns

Ext.Base
view source
( )private
...
\n

Overrides: Ext.state.Stateful.destroy, Ext.util.ElementContainer.destroy, Ext.AbstractComponent.destroy, Ext.AbstractPlugin.destroy

Ext.dom.AbstractHelper
view source
( el, o, returnElement, pos, sibling, append )private
...
\n

Parameters

Ext.dom.AbstractHelper
view source
( spec, buffer )private
...
\n

Parameters

Ext.dom.AbstractHelper
view source
( styles, [buffer] ) : String/String[]
Converts the styles from the given object to text. ...

Converts the styles from the given object to text. The styles are CSS style names\nwith their associated value.

\n\n

The basic form of this method returns a string:

\n\n
 var s = Ext.DomHelper.generateStyles({\n     backgroundColor: 'red'\n });\n\n // s = 'background-color:red;'\n
\n\n

Alternatively, this method can append to an output array.

\n\n
 var buf = [];\n\n ...\n\n Ext.DomHelper.generateStyles({\n     backgroundColor: 'red'\n }, buf);\n
\n\n

In this case, the style text is pushed on to the array and the array is returned.

\n

Parameters

  • styles : Object

    The object describing the styles.

    \n
  • buffer : String[] (optional)

    The output buffer.

    \n

Returns

  • String/String[]

    If buffer is passed, it is returned. Otherwise the style\nstring is returned.

    \n
Ext.Base
view source
( name )private
...
\n

Parameters

Ext.Base
view source
( [name] ) : Object/Mixed
Returns the initial configuration passed to constructor when instantiating\nthis class. ...

Returns the initial configuration passed to constructor when instantiating\nthis class.

\n

Parameters

  • name : String (optional)

    Name of the config option to return.

    \n

Returns

  • Object/Mixed

    The full config object or a single config value\nwhen name parameter specified.

    \n
Ext.Base
view source
( config )private
...
\n

Parameters

Ext.Base
view source
( config ) : Ext.Basechainableprotected
Initialize configuration for this class. ...

Initialize configuration for this class. a typical example:

\n\n
Ext.define('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
\n

Parameters

Returns

Ext.dom.AbstractHelper
view source
( el, o, [returnElement] ) : HTMLElement/Ext.Element
Creates new DOM element(s) and inserts them after el. ...

Creates new DOM element(s) and inserts them after el.

\n

Parameters

Returns

Ext.dom.AbstractHelper
view source
( el, o, [returnElement] ) : HTMLElement/Ext.Element
Creates new DOM element(s) and inserts them before el. ...

Creates new DOM element(s) and inserts them before el.

\n

Parameters

Returns

Ext.dom.AbstractHelper
view source
( el, o, [returnElement] ) : HTMLElement/Ext.Element
Creates new DOM element(s) and inserts them as the first child of el. ...

Creates new DOM element(s) and inserts them as the first child of el.

\n

Parameters

Returns

Ext.dom.AbstractHelper
view source
( where, el, html ) : HTMLElement
Inserts an HTML fragment into the DOM. ...

Inserts an HTML fragment into the DOM.

\n

Parameters

  • where : String

    Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.

    \n\n

    For example take the following HTML: <div>Contents</div>

    \n\n

    Using different where values inserts element to the following places:

    \n\n
      \n
    • beforeBegin: <HERE><div>Contents</div>
      • \n
    • afterBegin: <div><HERE>Contents</div>
      • \n
    • beforeEnd: <div>Contents<HERE></div>
      • \n
    • afterEnd: <div>Contents</div><HERE>
      • \n
    \n\n
  • el : HTMLElement/TextNode

    The context element

    \n
  • html : String

    The HTML fragment

    \n

Returns

  • HTMLElement

    The new node

    \n
Ext.dom.Helper
view source
( tag, where, destinationEl, html )private
Nasty code for IE's broken table implementation ...

Nasty code for IE's broken table implementation

\n

Parameters

Ext.dom.AbstractHelper
view source
( spec ) : String
Returns the markup for the passed Element(s) config. ...

Returns the markup for the passed Element(s) config.

\n

Parameters

  • spec : Object

    The DOM object spec (and children)

    \n

Returns

Ext.Base
view source
( names, callback, scope )private
...
\n

Parameters

Ext.dom.Helper
view source
( el, o, [returnElement] ) : HTMLElement/Ext.Element
Creates new DOM element(s) and overwrites the contents of el with them. ...

Creates new DOM element(s) and overwrites the contents of el with them.

\n

Parameters

Returns

Overrides: Ext.dom.AbstractHelper.overwrite

Ext.Base
view source
( config, applyIfNotSet ) : Ext.Basechainableprivate
...
\n

Parameters

Returns

Ext.Base
view source
( ) : Ext.Classprotected
Get the reference to the class from which this object was instantiated. ...

Get the reference to the class from which this object was instantiated. Note that unlike self,\nthis.statics() is scope-independent and it always returns the class from which it was called, regardless of what\nthis points to during run-time

\n\n
Ext.define('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\nExt.define('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(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'\nalert(clone.groupName);                 // alerts 'Cat'\n\nalert(My.Cat.totalCreated);             // alerts 3\n
\n

Returns

Defined By

Static Methods

Ext.Base
view source
( config )privatestatic
...
\n

Parameters

Ext.Base
view source
( members )chainableprivatestatic
...
\n

Parameters

Ext.Base
view source
( name, member )chainableprivatestatic
...
\n

Parameters

Ext.Base
view source
( members )chainablestatic
Add methods / properties to the prototype of this class. ...

Add methods / properties to the prototype of this class.

\n\n
Ext.define('My.awesome.Cat', {\n    constructor: function() {\n        ...\n    }\n});\n\n My.awesome.Cat.addMembers({\n     meow: function() {\n        alert('Meowww...');\n     }\n });\n\n var kitty = new My.awesome.Cat;\n kitty.meow();\n
\n

Parameters

Ext.Base
view source
( members ) : Ext.Basechainablestatic
Add / override static properties of this class. ...

Add / override static properties of this class.

\n\n
Ext.define('My.cool.Class', {\n    ...\n});\n\nMy.cool.Class.addStatics({\n    someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'\n    method1: function() { ... },    // My.cool.Class.method1 = function() { ... };\n    method2: function() { ... }     // My.cool.Class.method2 = function() { ... };\n});\n
\n

Parameters

Returns

Ext.Base
view source
( xtype )chainableprivatestatic
...
\n

Parameters

Ext.Base
view source
( fromClass, members ) : Ext.Basechainableprivatestatic
Borrow another class' members to the prototype of this class. ...

Borrow another class' members to the prototype of this class.

\n\n
Ext.define('Bank', {\n    money: '$$$',\n    printMoney: function() {\n        alert('$$$$$$$');\n    }\n});\n\nExt.define('Thief', {\n    ...\n});\n\nThief.borrow(Bank, ['money', 'printMoney']);\n\nvar steve = new Thief();\n\nalert(steve.money); // alerts '$$$'\nsteve.printMoney(); // alerts '$$$$$$$'\n
\n

Parameters

  • fromClass : Ext.Base

    The class to borrow members from

    \n
  • members : Array/String

    The names of the members to borrow

    \n

Returns

Ext.Base
view source
( ) : Objectstatic
Create a new instance of this Class. ...

Create a new instance of this Class.

\n\n
Ext.define('My.cool.Class', {\n    ...\n});\n\nMy.cool.Class.create({\n    someConfig: true\n});\n
\n\n

All parameters are passed to the constructor of the class.

\n

Returns

Ext.Base
view source
( alias, origin )static
Create aliases for existing prototype methods. ...

Create aliases for existing prototype methods. Example:

\n\n
Ext.define('My.cool.Class', {\n    method1: function() { ... },\n    method2: function() { ... }\n});\n\nvar test = new My.cool.Class();\n\nMy.cool.Class.createAlias({\n    method3: 'method1',\n    method4: 'method2'\n});\n\ntest.method3(); // test.method1()\n\nMy.cool.Class.createAlias('method5', 'method3');\n\ntest.method5(); // test.method3() -> test.method1()\n
\n

Parameters

Ext.Base
view source
( config )privatestatic
...
\n

Parameters

Ext.Base
view source
( ) : Stringstatic
Get the current class' name in string format. ...

Get the current class' name in string format.

\n\n
Ext.define('My.cool.Class', {\n    constructor: function() {\n        alert(this.self.getName()); // alerts 'My.cool.Class'\n    }\n});\n\nMy.cool.Class.getName(); // 'My.cool.Class'\n
\n

Returns

Ext.Base
view source
( )deprecatedstatic
Adds members to class. ...

Adds members to class.

\n
\n

This method has been deprecated since 4.1

\n

Use addMembers instead.

\n\n
\n
Ext.Base
view source
( name, mixinClass )privatestatic
Used internally by the mixins pre-processor ...

Used internally by the mixins pre-processor

\n

Parameters

Ext.Base
view source
( fn, scope )chainableprivatestatic
...
\n

Parameters

Ext.Base
view source
( members ) : Ext.Basechainabledeprecatedstatic
Override members of this class. ...

Override members of this class. Overridden methods can be invoked via\ncallParent.

\n\n
Ext.define('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.callParent(arguments);\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
\n\n

As of 4.1, direct use of this method is deprecated. Use Ext.define\ninstead:

\n\n
Ext.define('My.CatOverride', {\n    override: 'My.Cat',\n    constructor: function() {\n        alert(\"I'm going to be a cat!\");\n\n        this.callParent(arguments);\n\n        alert(\"Meeeeoooowwww\");\n    }\n});\n
\n\n

The above accomplishes the same result but can be managed by the Ext.Loader\nwhich can properly order the override and its target class and the build process\ncan determine whether the override is needed based on the required state of the\ntarget class (My.Cat).

\n
\n

This method has been deprecated since 4.1.0

\n

Use Ext.define instead

\n\n
\n

Parameters

  • members : Object

    The properties to add to this class. This should be\nspecified as an object literal containing one or more properties.

    \n

Returns

Ext.Base
view source
( )privatestatic
...
\n
","superclasses":["Ext.Base","Ext.dom.AbstractHelper","Ext.dom.Helper"],"meta":{},"code_type":"ext_define","requires":[],"html_meta":{},"statics":{"property":[{"tagname":"property","owner":"Ext.Base","meta":{"static":true,"private":true},"name":"$onExtended","id":"static-property-S-onExtended"}],"cfg":[],"css_var":[],"method":[{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"private":true},"name":"addConfig","id":"static-method-addConfig"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"chainable":true,"private":true},"name":"addInheritableStatics","id":"static-method-addInheritableStatics"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"chainable":true,"private":true},"name":"addMember","id":"static-method-addMember"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"chainable":true},"name":"addMembers","id":"static-method-addMembers"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"chainable":true},"name":"addStatics","id":"static-method-addStatics"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"chainable":true,"private":true},"name":"addXtype","id":"static-method-addXtype"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"chainable":true,"private":true},"name":"borrow","id":"static-method-borrow"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true},"name":"create","id":"static-method-create"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true},"name":"createAlias","id":"static-method-createAlias"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"private":true},"name":"extend","id":"static-method-extend"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true},"name":"getName","id":"static-method-getName"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"deprecated":{"text":"Use {@link #addMembers} instead.","version":"4.1"}},"name":"implement","id":"static-method-implement"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"private":true},"name":"mixin","id":"static-method-mixin"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"chainable":true,"private":true},"name":"onExtended","id":"static-method-onExtended"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"chainable":true,"markdown":true,"deprecated":{"text":"Use {@link Ext#define Ext.define} instead","version":"4.1.0"}},"name":"override","id":"static-method-override"},{"tagname":"method","owner":"Ext.Base","meta":{"static":true,"private":true},"name":"triggerExtended","id":"static-method-triggerExtended"}],"event":[],"css_mixin":[]},"files":[{"href":"Helper.html#Ext-DomHelper","filename":"Helper.js"}],"linenr":6,"members":{"property":[{"tagname":"property","owner":"Ext.Base","meta":{"private":true},"name":"$className","id":"property-S-className"},{"tagname":"property","owner":"Ext.dom.AbstractHelper","meta":{"private":true},"name":"attributeTransform","id":"property-attributeTransform"},{"tagname":"property","owner":"Ext.dom.AbstractHelper","meta":{"private":true},"name":"closeTags","id":"property-closeTags"},{"tagname":"property","owner":"Ext.dom.AbstractHelper","meta":{"private":true},"name":"confRe","id":"property-confRe"},{"tagname":"property","owner":"Ext.Base","meta":{"private":true},"name":"configMap","id":"property-configMap"},{"tagname":"property","owner":"Ext.dom.AbstractHelper","meta":{"private":true},"name":"decamelizeName","id":"property-decamelizeName"},{"tagname":"property","owner":"Ext.dom.AbstractHelper","meta":{"private":true},"name":"emptyTags","id":"property-emptyTags"},{"tagname":"property","owner":"Ext.dom.AbstractHelper","meta":{"private":true},"name":"endRe","id":"property-endRe"},{"tagname":"property","owner":"Ext.Base","meta":{"private":true},"name":"initConfigList","id":"property-initConfigList"},{"tagname":"property","owner":"Ext.Base","meta":{"private":true},"name":"initConfigMap","id":"property-initConfigMap"},{"tagname":"property","owner":"Ext.Base","meta":{"private":true},"name":"isInstance","id":"property-isInstance"},{"tagname":"property","owner":"Ext.Base","meta":{"protected":true},"name":"self","id":"property-self"},{"tagname":"property","owner":"Ext.dom.AbstractHelper","meta":{"private":true},"name":"styleSepRe","id":"property-styleSepRe"},{"tagname":"property","owner":"Ext.dom.Helper","meta":{},"name":"useDom","id":"property-useDom"}],"cfg":[],"css_var":[],"method":[{"tagname":"method","owner":"Ext.dom.AbstractHelper","meta":{},"name":"append","id":"method-append"},{"tagname":"method","owner":"Ext.dom.AbstractHelper","meta":{},"name":"applyStyles","id":"method-applyStyles"},{"tagname":"method","owner":"Ext.Base","meta":{"protected":true,"deprecated":{"text":"as of 4.1. Use {@link #callParent} instead."}},"name":"callOverridden","id":"method-callOverridden"},{"tagname":"method","owner":"Ext.Base","meta":{"protected":true},"name":"callParent","id":"method-callParent"},{"tagname":"method","owner":"Ext.Base","meta":{"protected":true},"name":"callSuper","id":"method-callSuper"},{"tagname":"method","owner":"Ext.Base","meta":{"private":true},"name":"configClass","id":"method-configClass"},{"tagname":"method","owner":"Ext.dom.Helper","meta":{"private":true},"name":"createContextualFragment","id":"method-createContextualFragment"},{"tagname":"method","owner":"Ext.dom.Helper","meta":{},"name":"createDom","id":"method-createDom"},{"tagname":"method","owner":"Ext.dom.Helper","meta":{},"name":"createHtml","id":"method-createHtml"},{"tagname":"method","owner":"Ext.dom.Helper","meta":{},"name":"createTemplate","id":"method-createTemplate"},{"tagname":"method","owner":"Ext.Base","meta":{"private":true},"name":"destroy","id":"method-destroy"},{"tagname":"method","owner":"Ext.dom.AbstractHelper","meta":{"private":true},"name":"doInsert","id":"method-doInsert"},{"tagname":"method","owner":"Ext.dom.AbstractHelper","meta":{"private":true},"name":"generateMarkup","id":"method-generateMarkup"},{"tagname":"method","owner":"Ext.dom.AbstractHelper","meta":{},"name":"generateStyles","id":"method-generateStyles"},{"tagname":"method","owner":"Ext.Base","meta":{"private":true},"name":"getConfig","id":"method-getConfig"},{"tagname":"method","owner":"Ext.Base","meta":{},"name":"getInitialConfig","id":"method-getInitialConfig"},{"tagname":"method","owner":"Ext.Base","meta":{"private":true},"name":"hasConfig","id":"method-hasConfig"},{"tagname":"method","owner":"Ext.Base","meta":{"chainable":true,"protected":true},"name":"initConfig","id":"method-initConfig"},{"tagname":"method","owner":"Ext.dom.AbstractHelper","meta":{},"name":"insertAfter","id":"method-insertAfter"},{"tagname":"method","owner":"Ext.dom.AbstractHelper","meta":{},"name":"insertBefore","id":"method-insertBefore"},{"tagname":"method","owner":"Ext.dom.AbstractHelper","meta":{},"name":"insertFirst","id":"method-insertFirst"},{"tagname":"method","owner":"Ext.dom.AbstractHelper","meta":{},"name":"insertHtml","id":"method-insertHtml"},{"tagname":"method","owner":"Ext.dom.Helper","meta":{"private":true},"name":"insertIntoTable","id":"method-insertIntoTable"},{"tagname":"method","owner":"Ext.dom.AbstractHelper","meta":{},"name":"markup","id":"method-markup"},{"tagname":"method","owner":"Ext.Base","meta":{"private":true},"name":"onConfigUpdate","id":"method-onConfigUpdate"},{"tagname":"method","owner":"Ext.dom.Helper","meta":{},"name":"overwrite","id":"method-overwrite"},{"tagname":"method","owner":"Ext.Base","meta":{"chainable":true,"private":true},"name":"setConfig","id":"method-setConfig"},{"tagname":"method","owner":"Ext.Base","meta":{"protected":true},"name":"statics","id":"method-statics"}],"event":[],"css_mixin":[]},"inheritable":null,"private":null,"component":false,"name":"Ext.DomHelper","singleton":true,"override":null,"inheritdoc":null,"id":"class-Ext.DomHelper","mixins":[],"mixedInto":[]});