Use if statement in 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 > 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>