docs/source/templates.html

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