X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..92c2b89db26be16707f4a805d3303ab2531006e1:/docs/source/XTemplate.html?ds=sidebyside diff --git a/docs/source/XTemplate.html b/docs/source/XTemplate.html index ba213553..fdf9f002 100644 --- a/docs/source/XTemplate.html +++ b/docs/source/XTemplate.html @@ -1,5 +1,6 @@ + The source code @@ -8,12 +9,38 @@ 
/**
  * @class Ext.XTemplate
  * @extends Ext.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 {@link 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:

+ * 
A template class that supports advanced functionality like:

+ * 
XTemplate provides the templating mechanism built into:

+ * 
+ * 
For example usage {@link #XTemplate see the constructor}.
  
+ *   
+ * @constructor
+ * The {@link Ext.Template#Template Ext.Template constructor} describes
+ * the acceptable parameters to pass to the constructor. The following
+ * examples demonstrate all of the supported features.

+ * 
+ *
+ * + * + * + * + *
  • 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 == &quot;Jack&quot;">Hello</tpl>
+ *
    + * Using the sample data above: * 
    
 var tpl = new Ext.XTemplate(
     '<p>Name: {name}</p>',
     '<p>Kids: ',
     '<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>',
+        '<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:

    + * + *
    + *
    • + * + * + *
  • 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 &gt; 1">',  // <-- Note that the > is encoded
-            '<p>{name}</p>',
+            '<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: *

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

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

    * 
    
 var tpl = new Ext.XTemplate(
     '<p>Name: {name}</p>',
@@ -147,8 +231,13 @@ var tpl = new Ext.XTemplate(
     '</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(
@@ -158,25 +247,35 @@ var tpl = new Ext.XTemplate(
         '<tpl if="this.isGirl(name)">',
             '<p>Girl: {name} - {age}</p>',
         '</tpl>',
+        // 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)">',
             '<p>{name} is a baby!</p>',
         '</tpl>',
-    '</tpl></p>', {
-     isGirl: function(name){
-         return name == 'Sara Grace';
-     },
-     isBaby: function(age){
-        return age < 1;
-     }
-});
+    '</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);
-
    - * @constructor - * @param {String/Array/Object} parts The HTML fragment or an array of fragments to join(""), or multiple arguments - * to join("") that can also include a config object + * + *
    + *
    • + * + * + * + * @param {Mixed} config */ Ext.XTemplate = function(){ Ext.XTemplate.superclass.constructor.apply(this, arguments); @@ -311,7 +410,8 @@ Ext.extend(Ext.XTemplate, Ext.Template, { } function codeFn(m, code){ - return "'"+ sep +'('+code+')'+sep+"'"; + // Single quotes get escaped when the template is compiled, however we want to undo this when running code. + return "'" + sep + '(' + code.replace(/\\'/g, "'") + ')' + sep + "'"; } // branched to use + in gecko and [].join() in others