Define your panel to hold the template

    

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function(){
  var userData = [
    {ID:1,FIRSTNAME:'A',LASTNAME:'B',EMAIL:'a@b.com',PASSWORD:'a',ADDRESSTYPE:'Home',STREET1:'Road',STREET2:'',STREET3:'',CITY:'New York',STATE:'NY',ZIP:'12345',PHONETYPE:'Cell',PHONE:'123-456-7890'},
    {ID:2,FIRSTNAME:'B',LASTNAME:'C',EMAIL:'d@e.com',PASSWORD:'a',ADDRESSTYPE:'Work',STREET1:'Lane',STREET2:'',STREET3:'',CITY:'Los Angeles',STATE:'CA',ZIP:'67890',PHONETYPE:'Home',PHONE:'456-789-0123'},
  ];
   
   var userDetail = new Contact.panels.ContactDetails({
     applyTo: 'my',
     title: 'Example',
     data: userData[0]
   });
   
   updateContact = function(event,el,data){
    userDetail.update(data.data);
  }
   
   Ext.get('actionLink').on('click',updateContact,this,{data:userData[1]});
});


Ext.namespace('Contact.panels');
Contact.panels.ContactDetails = Ext.extend(Ext.Panel,{
  width: 350,
  height: 250,
  data: {
    ID: 0,
    FIRSTNAME: '',
    LASTNAME: '',
    EMAIL: '',
    ADDRESSTYPE: 'Home (mailing)',
    STREET1: '',
    STREET2: '',
    STREET3: '',
    CITY: '',
    STATE: '',
    ZIP: '',
    PHONETYPE: 'Home',
    PHONE: ''
  },
  
  tpl: new Ext.XTemplate([
     '<b>{FIRSTNAME} {LASTNAME}</b><br />',
     '<p id="emailEdit_{ID}">{EMAIL}, {PHONE} ({PHONETYPE})</p>',
     '<b>{ADDRESSTYPE} Address</b><br />',
     '<tpl if="STREET2.length &gt; 0">',
       '{STREET2}<br />',
     '</tpl>',
     '<tpl if="STREET3.length &gt; 0">',
       '{STREET3}<br />',
     '</tpl>',
     '{CITY}, {STATE} {ZIP}'
   ]),
   
  initComponent: function(){
    Contact.panels.ContactDetails.superclass.initComponent.call(this);
    if (typeof this.tpl ==='string') {
      this.tpl = new Ext.XTemplate(this.tpl);
    }
  
  },
   
  onRender: function(ct, position) {
    Contact.panels.ContactDetails.superclass.onRender.call(this, ct, position);
    if (this.data) {
      this.update(this.data);
    }
  },
  
  update: function(data) {
    this.data = data;
    this.tpl.overwrite(this.body, this.data);
  }
});
</script>

<body>
<div id="my" style="margin:25px;"></div>
<a href="javascript:void(0)" id="actionLink">Update Data</a>
</body>
</html>

Related examples in the same category

1.	Pass data to template
2.	Define template and pass in data
3.	Compile template
4.	Use Ext.Template to display table detail
5.	Use tpl markup to extract data
6.	Reference user data and apply to template
7.	Define template data in an array
8.	Declare template with field marker
9.	Write template to a Panel and link with data
10.	Update template data
11.	Use if statement in template

Define your panel to hold the template : Template « Ext JS « JavaScript DHTML

Related examples in the same category