examples/core/templates.js

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