Reference user data and apply to 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:'b@c.com',PASSWORD:'b',ADDRESSTYPE:'Work',STREET1:'Lane',STREET2:'',STREET3:'',CITY:'Los Angeles',STATE:'CA',ZIP:'67890',PHONETYPE:'Home',PHONE:'456-789-0123'},
  ];
   
   var userDetail = new Ext.Panel({
     applyTo: 'my',
     width: 350,
     height: 250,
     title: 'Example',
     data: userData[0],
     tpl: new Ext.XTemplate([
       '<b>{FIRSTNAME} {LASTNAME}</b><br/>',
       '<b>{ADDRESSTYPE} Address</b><br />',
       '<b id="addrEdit_{ID}"/>{STREET1}<br />',
       '<tpl if="STREET2.length &gt; 0">',
         '<img src="s.gif" width="21" height="16" />{STREET2}<br />',
       '</tpl>',
       '<p/>{CITY}, {STATE} {ZIP}'
     ]),
     listeners:{
       render:{
         fn: function(el){
           this.tpl.overwrite(this.body,this.data);
         }
       }
     }
   });
});


</script>

<body>
<div id="my" style="margin:25px;"></div>
</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.	Define template data in an array
7.	Declare template with field marker
8.	Write template to a Panel and link with data
9.	Define your panel to hold the template
10.	Update template data
11.	Use if statement in template

Reference user data and apply to template : Template « Ext JS « JavaScript DHTML

Related examples in the same category