X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/output/Ext.XTemplate.html diff --git a/docs/output/Ext.XTemplate.html b/docs/output/Ext.XTemplate.html index dc835aff..02b9f951 100644 --- a/docs/output/Ext.XTemplate.html +++ b/docs/output/Ext.XTemplate.html @@ -1,29 +1,10 @@ -
-
- Properties - Methods - Events - Direct Link -
-
-
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, conditional processing with +

Properties Methods Events Direct Link 
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, 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.

+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 = {
+
var data = {
     name: 'Jack Slocum',
     title: 'Lead Developer',
     company: 'Ext JS, LLC',
@@ -44,27 +25,36 @@ 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 for="." is specified, the data object provided
+is examined. 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(
+    '<p>Kids: ',
+    '<tpl for=".">',
+        '<p>{name}</p>',
+    '</tpl></p>'
+);
+tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object

+
Scope switching
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);

 
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(
+
var tpl = new Ext.XTemplate(
     '<p>Name: {name}</p>',
     '<p>Kids: ',
-    '<tpl for="kids">',
-        '<tpl if="age &gt; 1">',  // <-- Note that the > is encoded
+    '<tpl for="kids">',
+        '<tpl if="age &gt; 1">',  // <-- Note that the > is encoded
             '<p>{name}</p>',
             '<p>Dad: {parent.name}</p>',
         '</tpl>',
@@ -74,11 +64,11 @@ 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(
+
var tpl = new Ext.XTemplate(
     '<p>Name: {name}</p>',
     '<p>Kids: ',
-    '<tpl for="kids">',
-        '<tpl if="age &gt; 1">',  // <-- Note that the > is encoded
+    '<tpl for="kids">',
+        '<tpl if="age &gt; 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>',
@@ -89,22 +79,22 @@ 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>'
+
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(
+
var tpl = new Ext.XTemplate(
     '<p>Name: {name}</p>',
     '<p>Kids: ',
-    '<tpl for="kids">',
-        '<tpl if="age &gt; 1">',  // <-- Note that the > is encoded
+    '<tpl for="kids">',
+        '<tpl if="age &gt; 1">',  // <-- Note that the > is encoded
             '<p>{name}</p>',
         '</tpl>',
     '</tpl></p>'
@@ -121,12 +111,12 @@ can change what values is.
 
  • 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(
+
    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>'
@@ -134,17 +124,17 @@ This example demonstrates basic row striping using an inline code block and the
 tpl.overwrite(panel.body, data);
    
 
    Template member functions 
    One or more member functions can be defined directly on the config
 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">',
+        '<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>', {
@@ -155,223 +145,26 @@ object passed into the XTemplate constructor for more complex processing:
    
         return age < 1;
      }
 });
-tpl.overwrite(panel.body, data);
    - -
    - -

    Public Properties

    -
    This class has no public properties.
    -

    Public Methods

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    MethodDefined By
    - -

    Public Events

    -
    This class has no public events.
    -
    \ No newline at end of file +tpl.overwrite(panel.body, data);

    Public Properties

    This class has no public properties.

    Public Methods

    MethodDefined By

    Public Events

    This class has no public events.
    \ No newline at end of file