Upgrade to ExtJS 3.0.0 - Released 07/06/2009

[extjs.git] / docs / source / templates.html
diff --git a/docs/source/templates.html b/docs/source/templates.html

new file mode 100644 (file)

index 0000000..c4702fa
--- /dev/null
+++ b/docs/source/templates.html
@@ -0,0 +1,78 @@
+<html>\r
+<head>\r
+  <title>The source code</title>\r
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body  onload="prettyPrint();">\r
+    <pre class="prettyprint lang-js">Ext.onReady(function(){\r
+\r
+    var data = {\r
+        name: 'Jack Slocum',\r
+        company: 'Ext JS, LLC',\r
+        address: '4 Red Bulls Drive',\r
+        city: 'Cleveland',\r
+        state: 'Ohio',\r
+        zip: '44102',\r
+        kids: [{\r
+            name: 'Sara Grace',\r
+            age:3\r
+        },{\r
+            name: 'Zachary',\r
+            age:2\r
+        },{\r
+            name: 'John James',\r
+            age:0\r
+        }]\r
+    };\r
+\r
+    var p = new Ext.Panel({\r
+        title: 'Basic Template',\r
+        width: 300,\r
+        html: '<p><i>Apply the template to see results here</i></p>',\r
+        tbar: [{\r
+            text: 'Apply Template',\r
+            handler: function(){\r
+\r
+                var tpl = new Ext.Template(\r
+                    '<p>Name: {name}</p>',\r
+                    '<p>Company: {company}</p>',\r
+                    '<p>Location: {city}, {state}</p>'\r
+                );\r
+\r
+                tpl.overwrite(p.body, data);\r
+                p.body.highlight('#c3daf9', {block:true});\r
+            }\r
+        }],\r
+\r
+        renderTo: document.body\r
+    });\r
+\r
+\r
+    var p2 = new Ext.Panel({\r
+        title: 'XTemplate',\r
+        width: 300,\r
+        html: '<p><i>Apply the template to see results here</i></p>',\r
+        tbar: [{\r
+            text: 'Apply Template',\r
+            handler: function(){\r
+\r
+                var tpl = new Ext.XTemplate(\r
+                    '<p>Name: {name}</p>',\r
+                    '<p>Company: {company}</p>',\r
+                    '<p>Location: {city}, {state}</p>',\r
+                    '<p>Kids: ',\r
+                    '<tpl for="kids" if="name==\'Jack Slocum\'">',\r
+                        '<tpl if="age &gt; 1"><p>{#}. {parent.name}\'s kid - {name}</p></tpl>',\r
+                    '</tpl></p>'\r
+                );\r
+                tpl.overwrite(p2.body, data);\r
+                p2.body.highlight('#c3daf9', {block:true});\r
+            }\r
+        }],\r
+\r
+        renderTo: document.body\r
+    });\r
+});</pre>    \r
+</body>\r
+</html>
+\ No newline at end of file