Ext.data.JsonP.Ext_XTemplate({"mixins":[],"code_type":"ext_define","inheritable":false,"component":false,"meta":{},"mixedInto":[],"uses":[],"aliases":{},"parentMixins":[],"superclasses":["Ext.Base","Ext.Template"],"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.XTemplate","tagname":"property","name":"emptyObj","id":"property-emptyObj"},{"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":{},"owner":"Ext.Template","tagname":"property","name":"isTemplate","id":"property-isTemplate"},{"meta":{"protected":true},"owner":"Ext.Base","tagname":"property","name":"self","id":"property-self"}],"css_var":[],"method":[{"meta":{},"owner":"Ext.Template","tagname":"method","name":"constructor","id":"method-constructor"},{"meta":{},"owner":"Ext.Template","tagname":"method","name":"append","id":"method-append"},{"meta":{},"owner":"Ext.Template","tagname":"method","name":"apply","id":"method-apply"},{"meta":{},"owner":"Ext.Template","tagname":"method","name":"applyOut","id":"method-applyOut"},{"meta":{},"owner":"Ext.Template","tagname":"method","name":"applyTemplate","id":"method-applyTemplate"},{"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":{},"owner":"Ext.XTemplate","tagname":"method","name":"compile","id":"method-compile"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"method","name":"configClass","id":"method-configClass"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"method","name":"destroy","id":"method-destroy"},{"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":{"protected":true},"owner":"Ext.XTemplate","tagname":"method","name":"getTpl","id":"method-getTpl"},{"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.Template","tagname":"method","name":"insertAfter","id":"method-insertAfter"},{"meta":{},"owner":"Ext.Template","tagname":"method","name":"insertBefore","id":"method-insertBefore"},{"meta":{},"owner":"Ext.Template","tagname":"method","name":"insertFirst","id":"method-insertFirst"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"method","name":"onConfigUpdate","id":"method-onConfigUpdate"},{"meta":{},"owner":"Ext.Template","tagname":"method","name":"overwrite","id":"method-overwrite"},{"meta":{},"owner":"Ext.Template","tagname":"method","name":"set","id":"method-set"},{"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":[{"meta":{},"owner":"Ext.XTemplate","tagname":"cfg","name":"compiled","id":"cfg-compiled"},{"meta":{},"owner":"Ext.XTemplate","tagname":"cfg","name":"definitions","id":"cfg-definitions"},{"meta":{},"owner":"Ext.Template","tagname":"cfg","name":"disableFormats","id":"cfg-disableFormats"}]},"tagname":"class","extends":"Ext.Template","html":"
Hierarchy
Ext.Base
Ext.Template
Ext.XTemplate
Requires
Ext.XTemplateCompiler
Files
XTemplate.js

A template class that supports advanced functionality like:

\n\n\n\n\n

XTemplate provides the templating mechanism built into Ext.view.View.

\n\n

The Ext.Template describes the acceptable parameters to pass to the constructor. The following examples\ndemonstrate all of the supported features.

\n\n

Sample Data

\n\n

This is the data object used for reference in each code example:

\n\n
var data = {\n    name: 'Don Griffin',\n    title: 'Senior Technomage',\n    company: 'Sencha Inc.',\n    drinks: ['Coffee', 'Water', 'More Coffee'],\n    kids: [\n        { name: 'Aubrey',  age: 17 },\n        { name: 'Joshua',  age: 13 },\n        { name: 'Cale',    age: 10 },\n        { name: 'Nikol',   age: 5 },\n        { name: 'Solomon', age: 0 }\n    ]\n};\n
\n\n

Auto filling of arrays

\n\n

The tpl tag and the for operator are used to process the provided data object:

\n\n\n\n\n

Examples:

\n\n
<tpl for=\".\">...</tpl>       // loop through array at root node\n<tpl for=\"foo\">...</tpl>     // loop through array at foo node\n<tpl for=\"foo.bar\">...</tpl> // loop through array at foo.bar node\n
\n\n

Using the sample data above:

\n\n
var tpl = new Ext.XTemplate(\n    '<p>Kids: ',\n    '<tpl for=\".\">',       // process the data.kids node\n        '<p>{#}. {name}</p>',  // use current array index to autonumber\n    '</tpl></p>'\n);\ntpl.overwrite(panel.body, data.kids); // pass the kids property of the data object\n
\n\n

An example illustrating how the for property can be leveraged to access specified members of the provided data\nobject to populate the template:

\n\n
var tpl = new Ext.XTemplate(\n    '<p>Name: {name}</p>',\n    '<p>Title: {title}</p>',\n    '<p>Company: {company}</p>',\n    '<p>Kids: ',\n    '<tpl for=\"kids\">',     // interrogate the kids property within the data\n        '<p>{name}</p>',\n    '</tpl></p>'\n);\ntpl.overwrite(panel.body, data);  // pass the root node of the data object\n
\n\n

Flat arrays that contain values (and not objects) can be auto-rendered using the special {.} variable inside a\nloop. This variable will represent the value of the array at the current index:

\n\n
var tpl = new Ext.XTemplate(\n    '<p>{name}\\'s favorite beverages:</p>',\n    '<tpl for=\"drinks\">',\n        '<div> - {.}</div>',\n    '</tpl>'\n);\ntpl.overwrite(panel.body, data);\n
\n\n

When processing a sub-template, for example while looping through a child array, you can access the parent object's\nmembers via the parent object:

\n\n
var tpl = new Ext.XTemplate(\n    '<p>Name: {name}</p>',\n    '<p>Kids: ',\n    '<tpl for=\"kids\">',\n        '<tpl if=\"age &gt; 1\">',\n            '<p>{name}</p>',\n            '<p>Dad: {parent.name}</p>',\n        '</tpl>',\n    '</tpl></p>'\n);\ntpl.overwrite(panel.body, data);\n
\n\n

Conditional processing with basic comparison operators

\n\n

The tpl tag and the if operator are used to provide conditional checks for deciding whether or not to render\nspecific parts of the template.

\n\n

Using the sample data above:

\n\n
var tpl = new Ext.XTemplate(\n    '<p>Name: {name}</p>',\n    '<p>Kids: ',\n    '<tpl for=\"kids\">',\n        '<tpl if=\"age &gt; 1\">',\n            '<p>{name}</p>',\n        '</tpl>',\n    '</tpl></p>'\n);\ntpl.overwrite(panel.body, data);\n
\n\n

More advanced conditionals are also supported:

\n\n
var tpl = new Ext.XTemplate(\n    '<p>Name: {name}</p>',\n    '<p>Kids: ',\n    '<tpl for=\"kids\">',\n        '<p>{name} is a ',\n        '<tpl if=\"age &gt;= 13\">',\n            '<p>teenager</p>',\n        '<tpl elseif=\"age &gt;= 2\">',\n            '<p>kid</p>',\n        '<tpl else>',\n            '<p>baby</p>',\n        '</tpl>',\n    '</tpl></p>'\n);\n\nvar tpl = new Ext.XTemplate(\n    '<p>Name: {name}</p>',\n    '<p>Kids: ',\n    '<tpl for=\"kids\">',\n        '<p>{name} is a ',\n        '<tpl switch=\"name\">',\n            '<tpl case=\"Aubrey\" case=\"Nikol\">',\n                '<p>girl</p>',\n            '<tpl default>',\n                '<p>boy</p>',\n        '</tpl>',\n    '</tpl></p>'\n);\n
\n\n

A break is implied between each case and default, however, multiple cases can be listed\nin a single <tpl> tag.

\n\n

Using double quotes

\n\n

Examples:

\n\n
var tpl = new Ext.XTemplate(\n    \"<tpl if='age &gt; 1 && age &lt; 10'>Child</tpl>\",\n    \"<tpl if='age &gt;= 10 && age &lt; 18'>Teenager</tpl>\",\n    \"<tpl if='this.isGirl(name)'>...</tpl>\",\n    '<tpl if=\"id == \\'download\\'\">...</tpl>',\n    \"<tpl if='needsIcon'><img src='{icon}' class='{iconCls}'/></tpl>\",\n    \"<tpl if='name == \\\"Don\\\"'>Hello</tpl>\"\n);\n
\n\n

Basic math support

\n\n

The following basic math operators may be applied directly on numeric data values:

\n\n
+ - * /\n
\n\n

For example:

\n\n
var tpl = new Ext.XTemplate(\n    '<p>Name: {name}</p>',\n    '<p>Kids: ',\n    '<tpl for=\"kids\">',\n        '<tpl if=\"age &gt; 1\">',  // <-- Note that the > is encoded\n            '<p>{#}: {name}</p>',  // <-- Auto-number each item\n            '<p>In 5 Years: {age+5}</p>',  // <-- Basic math\n            '<p>Dad: {parent.name}</p>',\n        '</tpl>',\n    '</tpl></p>'\n);\ntpl.overwrite(panel.body, data);\n
\n\n

Execute arbitrary inline code with special built-in template variables

\n\n

Anything between {[ ... ]} is considered code to be executed in the scope of the template.\nThe expression is evaluated and the result is included in the generated result. There are\nsome special variables available in that code:

\n\n\n\n\n

This example demonstrates basic row striping using an inline code block and the xindex variable:

\n\n
var tpl = new Ext.XTemplate(\n    '<p>Name: {name}</p>',\n    '<p>Company: {[values.company.toUpperCase() + \", \" + values.title]}</p>',\n    '<p>Kids: ',\n    '<tpl for=\"kids\">',\n        '<div class=\"{[xindex % 2 === 0 ? \"even\" : \"odd\"]}\">',\n        '{name}',\n        '</div>',\n    '</tpl></p>'\n );\n
\n\n

Any code contained in \"verbatim\" blocks (using \"{% ... %}\") will be inserted directly in\nthe generated code for the template. These blocks are not included in the output. This\ncan be used for simple things like break/continue in a loop, or control structures or\nmethod calls (when they don't produce output). The this references the template instance.

\n\n
var tpl = new Ext.XTemplate(\n    '<p>Name: {name}</p>',\n    '<p>Company: {[values.company.toUpperCase() + \", \" + values.title]}</p>',\n    '<p>Kids: ',\n    '<tpl for=\"kids\">',\n        '{% if (xindex % 2 === 0) continue; %}',\n        '{name}',\n        '{% if (xindex > 100) break; %}',\n        '</div>',\n    '</tpl></p>'\n );\n
\n\n

Template member functions

\n\n

One or more member functions can be specified in a configuration object passed into the XTemplate constructor for\nmore complex processing:

\n\n
var tpl = new Ext.XTemplate(\n    '<p>Name: {name}</p>',\n    '<p>Kids: ',\n    '<tpl for=\"kids\">',\n        '<tpl if=\"this.isGirl(name)\">',\n            '<p>Girl: {name} - {age}</p>',\n        '<tpl else>',\n            '<p>Boy: {name} - {age}</p>',\n        '</tpl>',\n        '<tpl if=\"this.isBaby(age)\">',\n            '<p>{name} is a baby!</p>',\n        '</tpl>',\n    '</tpl></p>',\n    {\n        // XTemplate configuration:\n        disableFormats: true,\n        // member functions:\n        isGirl: function(name){\n           return name == 'Aubrey' || name == 'Nikol';\n        },\n        isBaby: function(age){\n           return age < 1;\n        }\n    }\n);\ntpl.overwrite(panel.body, data);\n
\n
Defined By

Config options

Ext.XTemplate
view source
compiled : Boolean

Only applies to Ext.Template, XTemplates are compiled automatically on the\nfirst call to apply or applyOut.

\n

Only applies to Ext.Template, XTemplates are compiled automatically on the\nfirst call to apply or applyOut.

\n

Overrides: Ext.Template.compiled

Ext.XTemplate
view source
: String/Array
Optional. ...

Optional. A statement, or array of statements which set up vars which may then\nbe accessed within the scope of the generated function.

\n
Ext.Template
view source
: Boolean
True to disable format functions in the template. ...

True to disable format functions in the template. If the template doesn't contain\nformat functions, setting disableFormats to true will reduce apply time. Defaults to false.

\n

Defaults to: false

Properties

Defined By

Instance Properties

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

Defaults to: "Ext.Base"

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

Defaults to: {}

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

Defaults to: {}

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.Template
view source
: Boolean
true in this class to identify an object as an instantiated Template, or subclass thereof. ...

true in this class to identify an object as an instantiated Template, or subclass thereof.

\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
Defined By

Static Properties

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

Defaults to: []

Methods

Defined By

Instance Methods

Ext.Template
view source
new( String... html, [Object config] ) : Object
Creates new template. ...

Creates new template.

\n

Parameters

  • html : String...

    List of strings to be concatenated into template.\nAlternatively an array of strings can be given, but then no config object may be passed.

    \n
  • config : Object (optional)

    Config object

    \n

Returns

Ext.Template
view source
( String/HTMLElement/Ext.Element el, Object/Array values, [Boolean returnElement] ) : HTMLElement/Ext.Element
Applies the supplied values to the template and appends the new node(s) to the specified el. ...

Applies the supplied values to the template and appends the new node(s) to the specified el.

\n\n

For example usage see Ext.Template class docs.

\n

Parameters

Returns

Ext.Template
view source
( Object/Array values ) : String
Returns an HTML fragment of this template with the specified values applied. ...

Returns an HTML fragment of this template with the specified values applied.

\n

Parameters

  • values : Object/Array

    The template values. Can be an array if your params are numeric:

    \n\n\n\n\n
    var tpl = new Ext.Template('Name: {0}, Age: {1}');\ntpl.apply(['John', 25]);\n
    \n\n\n\n\n

    or an object:

    \n\n\n\n\n
    var tpl = new Ext.Template('Name: {name}, Age: {age}');\ntpl.apply({name: 'John', age: 25});\n
    \n\n

Returns

Ext.Template
view source
( Object/Array values, Array out ) : Array
Appends the result of this template to the provided output array. ...

Appends the result of this template to the provided output array.

\n

Parameters

Returns

  • Array

    The given out array.

    \n
Ext.Template
view source
( Object/Array values ) : String
Alias for apply. ...

Alias for apply.

\n\n

Returns an HTML fragment of this template with the specified values applied.

\n

Parameters

  • values : Object/Array

    The template values. Can be an array if your params are numeric:

    \n\n\n\n\n
    var tpl = new Ext.Template('Name: {0}, Age: {1}');\ntpl.apply(['John', 25]);\n
    \n\n\n\n\n

    or an object:

    \n\n\n\n\n
    var tpl = new Ext.Template('Name: {name}, Age: {age}');\ntpl.apply({name: 'John', age: 25});\n
    \n\n

Returns

Ext.Base
view source
( Array/Arguments 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
( Array/Arguments 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

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.XTemplate
view source
( ) : Ext.XTemplate
Does nothing. ...

Does nothing. XTemplates are compiled automatically, so this function simply returns this.

\n

Returns

Overrides: Ext.Template.compile

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

Overrides: Ext.AbstractComponent.destroy, Ext.AbstractPlugin.destroy, Ext.layout.Layout.destroy

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

Parameters

Ext.Base
view source
( [String 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.XTemplate
view source
( Object instance, String name ) : Ext.XTemplateprotected
Gets an XTemplate from an object (an instance of an Ext.define'd class). ...

Gets an XTemplate from an object (an instance of an Ext.define'd class).\nMany times, templates are configured high in the class hierarchy and are to be\nshared by all classes that derive from that base. To further complicate matters,\nthese templates are seldom actual instances but are rather configurations. For\nexample:

\n\n
 Ext.define('MyApp.Class', {\n     someTpl: [\n         'tpl text here'\n     ]\n });\n
\n\n

The goal being to share that template definition with all instances and even\ninstances of derived classes, until someTpl is overridden. This method will\n\"upgrade\" these configurations to be real XTemplate instances in place (to\navoid creating one instance per object).

\n

Parameters

  • instance : Object

    The object from which to get the XTemplate (must be\nan instance of an Ext.define'd class).

    \n
  • name : String

    The name of the property by which to get the XTemplate.

    \n

Returns

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

Parameters

Ext.Base
view source
( Object config ) : Ext.Baseprotected
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.Template
view source
( String/HTMLElement/Ext.Element el, Object/Array values, [Boolean returnElement] ) : HTMLElement/Ext.Element
Applies the supplied values to the template and inserts the new node(s) after el. ...

Applies the supplied values to the template and inserts the new node(s) after el.

\n

Parameters

Returns

Ext.Template
view source
( String/HTMLElement/Ext.Element el, Object/Array values, [Boolean returnElement] ) : HTMLElement/Ext.Element
Applies the supplied values to the template and inserts the new node(s) before el. ...

Applies the supplied values to the template and inserts the new node(s) before el.

\n

Parameters

Returns

Ext.Template
view source
( String/HTMLElement/Ext.Element el, Object/Array values, [Boolean returnElement] ) : HTMLElement/Ext.Element
Applies the supplied values to the template and inserts the new node(s) as the first child of el. ...

Applies the supplied values to the template and inserts the new node(s) as the first child of el.

\n

Parameters

Returns

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

Parameters

Ext.Template
view source
( String/HTMLElement/Ext.Element el, Object/Array values, [Boolean returnElement] ) : HTMLElement/Ext.Element
Applies the supplied values to the template and overwrites the content of el with the new node(s). ...

Applies the supplied values to the template and overwrites the content of el with the new node(s).

\n

Parameters

Returns

Ext.Template
view source
( String html, [Boolean compile] ) : Ext.Template
Sets the HTML used as the template and optionally compiles it. ...

Sets the HTML used as the template and optionally compiles it.

\n

Parameters

  • html : String
    \n
  • compile : Boolean (optional)

    True to compile the template.

    \n

Returns

Ext.Base
view source
( Object config, Object applyIfNotSet )private
...
\n

Parameters

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
( Object config )privatestatic
...
\n

Parameters

Ext.Base
view source
( Object members )privatestatic
...
\n

Parameters

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

Parameters

Ext.Base
view source
( Object members )static
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
( Object members ) : Ext.Basestatic
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
( Object xtype )privatestatic
...
\n

Parameters

Ext.Base
view source
( Ext.Base fromClass, Array/String members ) : Ext.Baseprivatestatic
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
( String/Object alias, String/Object 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
( Object config )privatestatic
...
\n

Parameters

Ext.Template
view source
( String/HTMLElement el, [Object config] ) : Ext.Templatestatic
Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML. ...

Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML.

\n

Parameters

  • el : String/HTMLElement

    A DOM element or its id

    \n
  • config : Object (optional)

    Config object

    \n

Returns

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
( Object name, Object mixinClass )privatestatic
Used internally by the mixins pre-processor ...

Used internally by the mixins pre-processor

\n

Parameters

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

Parameters

Ext.Base
view source
( Object members ) : Ext.Basedeprecatedstatic
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
","subclasses":[],"name":"Ext.XTemplate","alternateClassNames":[],"inheritdoc":null,"files":[{"href":"XTemplate.html#Ext-XTemplate","filename":"XTemplate.js"}],"html_meta":{},"singleton":false,"id":"class-Ext.XTemplate","statics":{"property":[{"meta":{"static":true,"private":true},"owner":"Ext.Base","tagname":"property","name":"$onExtended","id":"static-property-S-onExtended"}],"event":[],"css_var":[],"method":[{"meta":{"static":true,"private":true},"owner":"Ext.Base","tagname":"method","name":"addConfig","id":"static-method-addConfig"},{"meta":{"static":true,"private":true},"owner":"Ext.Base","tagname":"method","name":"addInheritableStatics","id":"static-method-addInheritableStatics"},{"meta":{"static":true,"private":true},"owner":"Ext.Base","tagname":"method","name":"addMember","id":"static-method-addMember"},{"meta":{"static":true},"owner":"Ext.Base","tagname":"method","name":"addMembers","id":"static-method-addMembers"},{"meta":{"static":true},"owner":"Ext.Base","tagname":"method","name":"addStatics","id":"static-method-addStatics"},{"meta":{"static":true,"private":true},"owner":"Ext.Base","tagname":"method","name":"addXtype","id":"static-method-addXtype"},{"meta":{"private":true,"static":true},"owner":"Ext.Base","tagname":"method","name":"borrow","id":"static-method-borrow"},{"meta":{"static":true},"owner":"Ext.Base","tagname":"method","name":"create","id":"static-method-create"},{"meta":{"static":true},"owner":"Ext.Base","tagname":"method","name":"createAlias","id":"static-method-createAlias"},{"meta":{"static":true,"private":true},"owner":"Ext.Base","tagname":"method","name":"extend","id":"static-method-extend"},{"meta":{"static":true},"owner":"Ext.Template","tagname":"method","name":"from","id":"static-method-from"},{"meta":{"static":true},"owner":"Ext.Base","tagname":"method","name":"getName","id":"static-method-getName"},{"meta":{"deprecated":{"text":"Use {@link #addMembers} instead.","version":"4.1"},"static":true},"owner":"Ext.Base","tagname":"method","name":"implement","id":"static-method-implement"},{"meta":{"static":true,"private":true},"owner":"Ext.Base","tagname":"method","name":"mixin","id":"static-method-mixin"},{"meta":{"static":true,"private":true},"owner":"Ext.Base","tagname":"method","name":"onExtended","id":"static-method-onExtended"},{"meta":{"deprecated":{"text":"Use {@link Ext#define Ext.define} instead","version":"4.1.0"},"markdown":true,"static":true},"owner":"Ext.Base","tagname":"method","name":"override","id":"static-method-override"},{"meta":{"static":true,"private":true},"owner":"Ext.Base","tagname":"method","name":"triggerExtended","id":"static-method-triggerExtended"}],"css_mixin":[],"cfg":[]},"requires":["Ext.XTemplateCompiler"]});