examples/core/templates.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 Ext.onReady(function(){\r
  10 \r
  11     var data = {\r
  12         name: 'Jack Slocum',\r
  13         company: 'Ext JS, LLC',\r
  14         address: '4 Red Bulls Drive',\r
  15         city: 'Cleveland',\r
  16         state: 'Ohio',\r
  17         zip: '44102',\r
  18         kids: [{\r
  19             name: 'Sara Grace',\r
  20             age:3\r
  21         },{\r
  22             name: 'Zachary',\r
  23             age:2\r
  24         },{\r
  25             name: 'John James',\r
  26             age:0\r
  27         }]\r
  28     };\r
  29 \r
  30     var p = new Ext.Panel({\r
  31         title: 'Basic Template',\r
  32         width: 300,\r
  33         html: '<p><i>Apply the template to see results here</i></p>',\r
  34         tbar: [{\r
  35             text: 'Apply Template',\r
  36             handler: function(){\r
  37 \r
  38                 var tpl = new Ext.Template(\r
  39                     '<p>Name: {name}</p>',\r
  40                     '<p>Company: {company}</p>',\r
  41                     '<p>Location: {city}, {state}</p>'\r
  42                 );\r
  43 \r
  44                 tpl.overwrite(p.body, data);\r
  45                 p.body.highlight('#c3daf9', {block:true});\r
  46             }\r
  47         }],\r
  48 \r
  49         renderTo: document.body\r
  50     });\r
  51 \r
  52 \r
  53     var p2 = new Ext.Panel({\r
  54         title: 'XTemplate',\r
  55         width: 300,\r
  56         html: '<p><i>Apply the template to see results here</i></p>',\r
  57         tbar: [{\r
  58             text: 'Apply Template',\r
  59             handler: function(){\r
  60 \r
  61                 var tpl = new Ext.XTemplate(\r
  62                     '<p>Name: {name}</p>',\r
  63                     '<p>Company: {company}</p>',\r
  64                     '<p>Location: {city}, {state}</p>',\r
  65                     '<p>Kids: ',\r
  66                     '<tpl for="kids" if="name==\'Jack Slocum\'">',\r
  67                         '<tpl if="age &gt; 1"><p>{#}. {parent.name}\'s kid - {name}</p></tpl>',\r
  68                     '</tpl></p>'\r
  69                 );\r
  70                 tpl.overwrite(p2.body, data);\r
  71                 p2.body.highlight('#c3daf9', {block:true});\r
  72             }\r
  73         }],\r
  74 \r
  75         renderTo: document.body\r
  76     });\r
  77 });