X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/source/templates.html diff --git a/docs/source/templates.html b/docs/source/templates.html new file mode 100644 index 00000000..c4702fa8 --- /dev/null +++ b/docs/source/templates.html @@ -0,0 +1,78 @@ + + + The source code + + + + + 
Ext.onReady(function(){
+
+    var data = {
+        name: 'Jack Slocum',
+        company: 'Ext JS, LLC',
+        address: '4 Red Bulls Drive',
+        city: 'Cleveland',
+        state: 'Ohio',
+        zip: '44102',
+        kids: [{
+            name: 'Sara Grace',
+            age:3
+        },{
+            name: 'Zachary',
+            age:2
+        },{
+            name: 'John James',
+            age:0
+        }]
+    };
+
+    var p = new Ext.Panel({
+        title: 'Basic Template',
+        width: 300,
+        html: '
Apply the template to see results here
',
+        tbar: [{
+            text: 'Apply Template',
+            handler: function(){
+
+                var tpl = new Ext.Template(
+                    '
Name: {name}
',
+                    '
Company: {company}
',
+                    '
Location: {city}, {state}
'
+                );
+
+                tpl.overwrite(p.body, data);
+                p.body.highlight('#c3daf9', {block:true});
+            }
+        }],
+
+        renderTo: document.body
+    });
+
+
+    var p2 = new Ext.Panel({
+        title: 'XTemplate',
+        width: 300,
+        html: '
Apply the template to see results here
',
+        tbar: [{
+            text: 'Apply Template',
+            handler: function(){
+
+                var tpl = new Ext.XTemplate(
+                    '
Name: {name}
',
+                    '
Company: {company}
',
+                    '
Location: {city}, {state}
',
+                    '
Kids: ',
+                    '',
+                        '
{#}. {parent.name}\'s kid - {name}
',
+                    '
'
+                );
+                tpl.overwrite(p2.body, data);
+                p2.body.highlight('#c3daf9', {block:true});
+            }
+        }],
+
+        renderTo: document.body
+    });
+});
+ + \ No newline at end of file