Mega Code Archive
Define your panel to hold the template
<![CDATA[
<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 > 0">',
'{STREET2}<br />',
'</tpl>',
'<tpl if="STREET3.length > 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>
]]>