examples/platform/templates.js

   1 Ext.require('widget.panel');
   2
   3 Ext.onReady(function(){
   4     var data = {
   5         name: 'Abe Elias',
   6         company: 'Sencha Inc',
   7         address: '525 University Ave',
   8         city: 'Palo Alto',
   9         state: 'California',
  10         zip: '44102',
  11         kids: [{
  12             name: 'Solomon',
  13             age:3
  14         },{
  15             name: 'Rebecca',
  16             age:2
  17         },{
  18             name: 'Rebecca 1',
  19             age:0
  20         }]
  21     };
  22
  23     Ext.create('Ext.Panel', {
  24         width: 300,
  25         renderTo: 'template-example',
  26         style: "margin:15px",
  27         bodyStyle: "padding:5px;font-size:11px;",
  28         title: 'Basic Template',
  29         tbar: [{
  30             text: 'Apply Template',
  31             listeners: {
  32                 click: function() {
  33                     var panel = this.up("panel"),
  34                         tpl = Ext.create('Ext.Template',
  35                             '<p>Name: {name}</p>',
  36                             '<p>Company: {company}</p>',
  37                             '<p>Location: {city}, {state}</p>'
  38                         );
  39
  40                     tpl.overwrite(panel.body, data);
  41                     panel.doComponentLayout();
  42                 }
  43             }
  44         }],
  45         html: '<p><i>Apply the template to see results here</i></p>'
  46     });
  47
  48     Ext.create('Ext.Panel', {
  49         width: 300,
  50         renderTo: 'xtemplate-example',
  51         style: "margin:15px",
  52         bodyStyle: "padding:5px;font-size:11px;",
  53         title: 'XTemplate',
  54         tbar: [{
  55             text: 'Apply Template',
  56             listeners: {
  57                 click: function() {
  58                     var panel = this.up('panel'),
  59                         tpl =Ext.create('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==\'Abe Elias\'">',
  65                                 '<tpl if="age &gt; 1"><p>{#}. {parent.name}\'s kid - {name}</p></tpl>',
  66                             '</tpl></p>'
  67                         );
  68                     tpl.overwrite(panel.body, data);
  69                     panel.doComponentLayout();
  70                 }
  71             }
  72         }],
  73         html: '<p><i>Apply the template to see results here</i></p>'
  74     });
  75 });