X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..92c2b89db26be16707f4a805d3303ab2531006e1:/docs/output/Ext.XTemplate.html diff --git a/docs/output/Ext.XTemplate.html b/docs/output/Ext.XTemplate.html index dc835aff..5903e7e9 100644 --- a/docs/output/Ext.XTemplate.html +++ b/docs/output/Ext.XTemplate.html @@ -1,29 +1,54 @@ -
Template - XTemplate
Package: | Ext |
Defined In: | XTemplate.js |
Class: | XTemplate |
Extends: | Template |
A template class that supports advanced functionality like autofilling arrays, conditional processing with -basic comparison operators, sub-templates, basic math function support, special built-in template variables, -inline code execution and more. XTemplate also provides the templating mechanism built into Ext.DataView.
-XTemplate supports many special tags and built-in operators that aren't defined as part of the API, but are -supported in the templates that can be created. The following examples demonstrate all of the supported features. -This is the data object used for reference in each code example:
-var data = {
+Template
XTemplate
Class Ext.XTemplate
Package: Ext Defined In: XTemplate.js Class: XTemplate Extends: Template
A template class that supports advanced functionality like:
+- Autofilling arrays using templates and sub-templates
+- Conditional processing with basic comparison operators
+- Basic math function support
+- Execute arbitrary inline code with special built-in template variables
+- Custom member functions
+- Many special tags and built-in operators that aren't defined as part of
+the API, but are supported in the templates that can be created
+
+XTemplate provides the templating mechanism built into:
+For example usage see the constructor.
Config Options
Config Options Defined By compiled : BooleanSpecify true to compile the template
+immediately (see compile
).
+Defaults to false. Template disableFormats : BooleanSpecify true to disable format
+functions in the template. If the template does not contain
+format functions, settin...Specify true to disable format
+functions in the template. If the template does not contain
+format functions, setting disableFormats
+to true will reduce apply
time. Defaults to false.
+var t = new Ext.Template(
+ '<div name="{id}">',
+ '<span class="{cls}">{name} {value}</span>',
+ '</div>',
+ {
+ compiled: true, // compile immediately
+ disableFormats: true // reduce apply
time since no formatting
+ }
+);
+
+For a list of available format functions, see Ext.util.Format. Template re : RegExpThe regular expression used to match template variables.
+Defaults to:re : /\{([\w-]+)\}/g ...The regular expression used to match template variables.
+Defaults to:re : /\{([\w-]+)\}/g // for Ext Core
+re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g // for Ext JS
Template
Public Properties
This class has no public properties.Public Methods
Method Defined By XTemplate( Mixed config
)
+ The Ext.Template constructor describes
+the acceptable parameters to pass to the constructor. The following
+examples d...The Ext.Template constructor describes
+the acceptable parameters to pass to the constructor. The following
+examples demonstrate all of the supported features.
+
+- Sample Data
+
+
This is the data object used for reference in each code example:
+var data = {
name: 'Jack Slocum',
title: 'Lead Developer',
company: 'Ext JS, LLC',
@@ -44,334 +69,208 @@ This is the data object used for reference in each code example:
age:0
}]
};
-Auto filling of arrays and scope switching
Using the tpl tag and the for operator,
-you can switch to the scope of the object specified by for and access its members to populate the template.
-If the variable in for is an array, it will auto-fill, repeating the template block inside the tpl
-tag for each item in the array:
-var tpl = new Ext.XTemplate(
+
+
+- Auto filling of arrays
+
+
The tpl tag and the for operator are used
+to process the provided data object:
+
+- If the value specified in for is an array, it will auto-fill,
+repeating the template block inside the tpl tag for each item in the
+array.
+- If for="." is specified, the data object provided is examined.
+- While processing an array, the special variable {#}
+will provide the current array index + 1 (starts at 1, not 0).
+
+
+<tpl for=".">...</tpl> // loop through array at root node
+<tpl for="foo">...</tpl> // loop through array at foo node
+<tpl for="foo.bar">...</tpl> // loop through array at foo.bar node
+Using the sample data above:
+var tpl = new Ext.XTemplate(
+ '<p>Kids: ',
+ '<tpl for=".">', // process the data.kids node
+ '<p>{#}. {name}</p>', // use current array index to autonumber
+ '</tpl></p>'
+);
+tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object
+An example illustrating how the for property can be leveraged
+to access specified members of the provided data object to populate the template:
+var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Title: {title}</p>',
'<p>Company: {company}</p>',
'<p>Kids: ',
- '<tpl for="kids">',
+ '<tpl for="kids">', // interrogate the kids property within the data
'<p>{name}</p>',
'</tpl></p>'
);
+tpl.overwrite(panel.body, data); // pass the root node of the data object
+Flat arrays that contain values (and not objects) can be auto-rendered
+using the special {.} variable inside a loop. This variable
+will represent the value of the array at the current index:
+var tpl = new Ext.XTemplate(
+ '<p>{name}\'s favorite beverages:</p>',
+ '<tpl for="drinks">',
+ '<div> - {.}</div>',
+ '</tpl>'
+);
tpl.overwrite(panel.body, data);
-Access to parent object from within sub-template scope
When processing a sub-template, for example while
-looping through a child array, you can access the parent object's members via the parent object:
-var tpl = new Ext.XTemplate(
+When processing a sub-template, for example while looping through a child array,
+you can access the parent object's members via the parent object:
+var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
- '<tpl for="kids">',
- '<tpl if="age > 1">', // <-- Note that the > is encoded
+ '<tpl for="kids">',
+ '<tpl if="age > 1">',
'<p>{name}</p>',
- '<p>Dad: {parent.name}</p>',
+ '<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
-Array item index and basic math support
While processing an array, the special variable {#}
-will provide the current array index + 1 (starts at 1, not 0). Templates also support the basic math operators
-+ - * and / that can be applied directly on numeric data values:
-var tpl = new Ext.XTemplate(
+
+
+- Conditional processing with basic comparison operators
+
+
The tpl tag and the if operator are used
+to provide conditional checks for deciding whether or not to render specific
+parts of the template. Notes:
+- Double quotes must be encoded if used within the conditional
+- There is no else operator — if needed, two opposite
+if statements should be used.
+
+<tpl if="age > 1 && age < 10">Child</tpl>
+<tpl if="age >= 10 && age < 18">Teenager</tpl>
+<tpl if="this.isGirl(name)">...</tpl>
+<tpl if="id==\'download\'">...</tpl>
+<tpl if="needsIcon"><img src="{icon}" class="{iconCls}"/></tpl>
+// no good:
+<tpl if="name == "Jack"">Hello</tpl>
+// encode " if it is part of the condition, e.g.
+<tpl if="name == "Jack"">Hello</tpl>
+Using the sample data above:
+var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
- '<tpl for="kids">',
- '<tpl if="age > 1">', // <-- Note that the > is encoded
- '<p>{#}: {name}</p>', // <-- Auto-number each item
- '<p>In 5 Years: {age+5}</p>', // <-- Basic math
- '<p>Dad: {parent.name}</p>',
+ '<tpl for="kids">',
+ '<tpl if="age > 1">',
+ '<p>{name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
-Auto-rendering of flat arrays
Flat arrays that contain values (and not objects) can be auto-rendered
-using the special {.} variable inside a loop. This variable will represent the value of
-the array at the current index:
-var tpl = new Ext.XTemplate(
- '<p>{name}\'s favorite beverages:</p>',
- '<tpl for="drinks">',
- '<div> - {.}</div>',
- '</tpl>'
-);
-tpl.overwrite(panel.body, data);
-Basic conditional logic
Using the tpl tag and the if
-operator you can provide conditional checks for deciding whether or not to render specific parts of the template.
-Note that there is no else operator — if needed, you should use two opposite if statements.
-Properly-encoded attributes are required as seen in the following example:
-var tpl = new Ext.XTemplate(
+
+
+- Basic math support
+
+
The following basic math operators may be applied directly on numeric
+data values:
++ - * /
+
+For example:
+var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
- '<tpl for="kids">',
- '<tpl if="age > 1">', // <-- Note that the > is encoded
- '<p>{name}</p>',
+ '<tpl for="kids">',
+ '<tpl if="age > 1">', // <-- Note that the > is encoded
+ '<p>{#}: {name}</p>', // <-- Auto-number each item
+ '<p>In 5 Years: {age+5}</p>', // <-- Basic math
+ '<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
-Ability to execute arbitrary inline code
In an XTemplate, anything between {[ ... ]} is considered
-code to be executed in the scope of the template. There are some special variables available in that code:
+
+
+- Execute arbitrary inline code with special built-in template variables
+
+
Anything between {[ ... ]}
is considered code to be executed
+in the scope of the template. There are some special variables available in that code:
-- values: The values in the current scope. If you are using scope changing sub-templates, you
-can change what values is.
+- values: The values in the current scope. If you are using
+scope changing sub-templates, you can change what values is.
- parent: The scope (values) of the ancestor template.
-- xindex: If you are in a looping template, the index of the loop you are in (1-based).
-- xcount: If you are in a looping template, the total length of the array you are looping.
+- xindex: If you are in a looping template, the index of the
+loop you are in (1-based).
+- xcount: If you are in a looping template, the total length
+of the array you are looping.
- fm: An alias for Ext.util.Format.
-This example demonstrates basic row striping using an inline code block and the xindex variable:
-var tpl = new Ext.XTemplate(
+This example demonstrates basic row striping using an inline code block and the
+xindex variable:
+var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
- '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
+ '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
'<p>Kids: ',
- '<tpl for="kids">',
- '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
+ '<tpl for="kids">',
+ '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
'{name}',
'</div>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
-Template member functions
One or more member functions can be defined directly on the config
+
+
+- Template member functions
+
+
One or more member functions can be specified in a configuration
object passed into the XTemplate constructor for more complex processing:
-var tpl = new Ext.XTemplate(
+var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
- '<tpl for="kids">',
- '<tpl if="this.isGirl(name)">',
+ '<tpl for="kids">',
+ '<tpl if="this.isGirl(name)">',
'<p>Girl: {name} - {age}</p>',
'</tpl>',
- '<tpl if="this.isGirl(name) == false">',
+ // use opposite if statement to simulate 'else' processing:
+ '<tpl if="this.isGirl(name) == false">',
'<p>Boy: {name} - {age}</p>',
'</tpl>',
- '<tpl if="this.isBaby(age)">',
+ '<tpl if="this.isBaby(age)">',
'<p>{name} is a baby!</p>',
'</tpl>',
- '</tpl></p>', {
- isGirl: function(name){
- return name == 'Sara Grace';
- },
- isBaby: function(age){
- return age < 1;
- }
-});
-tpl.overwrite(panel.body, data);
-
-
-
- Public Properties
- This class has no public properties.
- Public Methods
-
-
- Method
- Defined By
-
-
-
-
-
- XTemplate( String/Array/Object parts
)
-
-
-
- Parameters:
- parts
: String/Array/ObjectThe HTML fragment or an array of fragments to join(""), or multiple arguments
-to join("") that can also include a config object
- Returns:
-
-
-
-
-
-
-
- XTemplate
-
-
-
-
-
- XTemplate.from( String/HTMLElement el
) : Ext.Template
- <static> Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML.
-
- <static> Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML.
- Parameters:
- el
: String/HTMLElementA DOM element or its id
- Returns:
-
- Ext.Template
The created template
-
-
-
-
-
- XTemplate
-
-
-
-
-
- append( Mixed el
, Object/Array values
, [Boolean returnElement
] ) : HTMLElement/Ext.Element
- Applies the supplied values to the template and appends the new node(s) to el.
-
- Applies the supplied values to the template and appends the new node(s) to el.
- Parameters:
- el
: MixedThe context elementvalues
: Object/ArrayThe template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})returnElement
: Boolean(optional) true to return a Ext.Element (defaults to undefined)
- Returns:
-
- HTMLElement/Ext.Element
The new node or Element
-
-
-
-
-
- Template
-
-
-
-
-
- apply( Object/Array values
) : String
- Alias for applyTemplate
-Returns an HTML fragment of this template with the specified values applied.
-
- Alias for applyTemplate
-Returns an HTML fragment of this template with the specified values applied.
- Parameters:
- values
: Object/ArrayThe template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
- Returns:
-
- String
The HTML fragment
-
-
-
-
-
- XTemplate
-
-
-
-
-
- applyTemplate( Object 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.
- Parameters:
- values
: ObjectThe template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
- Returns:
-
- String
The HTML fragment
-
-
-
-
-
- XTemplate
-
-
-
-
-
- compile() : Function
- Compile the template to a function for optimized performance. Recommended if the template will be used frequently.
-
- Compile the template to a function for optimized performance. Recommended if the template will be used frequently.
- Parameters:
- - None.
- Returns:
-
- Function
The compiled function
-
-
-
-
-
- XTemplate
-
-
-
-
-
- insertAfter( Mixed 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.
- Parameters:
- el
: MixedThe context elementvalues
: Object/ArrayThe template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})returnElement
: Boolean(optional) true to return a Ext.Element (defaults to undefined)
- Returns:
-
- HTMLElement/Ext.Element
The new node or Element
-
-
-
-
-
- Template
-
-
-
-
-
- insertBefore( Mixed 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.
- Parameters:
- el
: MixedThe context elementvalues
: Object/ArrayThe template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})returnElement
: Boolean(optional) true to return a Ext.Element (defaults to undefined)
- Returns:
-
- HTMLElement/Ext.Element
The new node or Element
-
-
-
-
-
- Template
-
-
-
-
-
- insertFirst( Mixed 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.
- Parameters:
- el
: MixedThe context elementvalues
: Object/ArrayThe template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})returnElement
: Boolean(optional) true to return a Ext.Element (defaults to undefined)
- Returns:
-
- HTMLElement/Ext.Element
The new node or Element
-
-
-
-
-
- Template
-
-
-
-
-
- overwrite( Mixed 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).
- Parameters:
- el
: MixedThe context elementvalues
: Object/ArrayThe template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})returnElement
: Boolean(optional) true to return a Ext.Element (defaults to undefined)
- Returns:
-
- HTMLElement/Ext.Element
The new node or Element
-
-
-
-
-
- Template
-
-
-
- Public Events
- This class has no public events.
-
\ No newline at end of file
+ '</tpl></p>',
+ {
+ // XTemplate configuration:
+ compiled: true,
+ disableFormats: true,
+ // member functions:
+ isGirl: function(name){
+ return name == 'Sara Grace';
+ },
+ isBaby: function(age){
+ return age < 1;
+ }
+ }
+);
+tpl.overwrite(panel.body, data);
+
+
+Parameters:config
: Mixed
Returns:- void
XTemplate XTemplate.from( String/HTMLElement el
)
+ :
+ Ext.Template<static> Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML.<static> Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML.Parameters:el
: String/HTMLElementA DOM element or its id
Returns:Ext.Template
The created template
XTemplate append( Mixed el
, Object/Array values
, [Boolean returnElement
] )
+ :
+ HTMLElement/Ext.ElementApplies the supplied values to the template and appends
+the new node(s) to the specified el.
+For example usage see th...Applies the supplied values
to the template and appends
+the new node(s) to the specified el
.
+For example usage see the constructor.
Parameters:el
: MixedThe context elementvalues
: Object/ArrayThe template values. Can be an array if the params are numeric (i.e. {0}
)
+or an object (i.e. {foo: 'bar'}
).returnElement
: Boolean(optional) true to return an Ext.Element (defaults to undefined)
Returns:HTMLElement/Ext.Element
The new node or Element
Template apply( Object/Array values
)
+ :
+ StringAlias for applyTemplate
+Returns an HTML fragment of this template with the specified values applied.Alias for applyTemplate
+Returns an HTML fragment of this template with the specified values applied.Parameters:values
: Object/ArrayThe template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
Returns:String
The HTML fragment
XTemplate applyTemplate( Object values
)
+ :
+ StringReturns an HTML fragment of this template with the specified values applied.Returns an HTML fragment of this template with the specified values applied.Parameters:values
: ObjectThe template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
Returns:String
The HTML fragment
XTemplate compile()
+ :
+ FunctionCompile the template to a function for optimized performance. Recommended if the template will be used frequently.Compile the template to a function for optimized performance. Recommended if the template will be used frequently.Parameters:- None.
Returns:Function
The compiled function
XTemplate insertAfter( Mixed el
, Object/Array values
, [Boolean returnElement
] )
+ :
+ HTMLElement/Ext.ElementApplies 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.Parameters:el
: MixedThe context elementvalues
: Object/ArrayThe template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})returnElement
: Boolean(optional) true to return a Ext.Element (defaults to undefined)
Returns:HTMLElement/Ext.Element
The new node or Element
Template insertBefore( Mixed el
, Object/Array values
, [Boolean returnElement
] )
+ :
+ HTMLElement/Ext.ElementApplies 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.Parameters:el
: MixedThe context elementvalues
: Object/ArrayThe template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})returnElement
: Boolean(optional) true to return a Ext.Element (defaults to undefined)
Returns:HTMLElement/Ext.Element
The new node or Element
Template insertFirst( Mixed el
, Object/Array values
, [Boolean returnElement
] )
+ :
+ HTMLElement/Ext.ElementApplies 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.Parameters:el
: MixedThe context elementvalues
: Object/ArrayThe template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})returnElement
: Boolean(optional) true to return a Ext.Element (defaults to undefined)
Returns:HTMLElement/Ext.Element
The new node or Element
Template overwrite( Mixed el
, Object/Array values
, [Boolean returnElement
] )
+ :
+ HTMLElement/Ext.ElementApplies 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).Parameters:el
: MixedThe context elementvalues
: Object/ArrayThe template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})returnElement
: Boolean(optional) true to return a Ext.Element (defaults to undefined)
Returns:HTMLElement/Ext.Element
The new node or Element
Template
Public Events
This class has no public events.
\ No newline at end of file