examples/core/templates.js

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