var usersArr = [ { name: 'Navin R. Johnson', photo: 'http://img.skitch.com/20110922-nh7dx65xub4ddc3k7nwbbax14t.png' }, { name: 'Gonzo', photo: 'http://img.skitch.com/20110922-cixxm8mfd5hahx6bjjse3b1qd8.png' }, { name: 'Macho Man Randy Savage', photo: 'http://img.skitch.com/20110922-q2xaiaikk9992rnqpepn39gak4.png' } ]; // Create a utility class Ext.define('myapp.util.Util', { singleton: true, // We would probably have other utility functions here, too... loaderXTemplateRenderer: function(loader, response, active) { var tpl = new Ext.XTemplate(response.responseText); var targetComponent = loader.getTarget(); targetComponent.update( tpl.apply(targetComponent.data) ); return true; } }); Ext.create('Ext.container.Container', { renderTo:Ext.getBody(), data: { users: usersArr }, loader: { // URL where the file containing XTemplate markup can be downloaded. // Note: we're using a neat JSFiddle feature in which JSFiddle will // act as a proxy for getting static files from a GitHub Gist; that's // why this URL looks a little weird. See http://goo.gl/8qvBz url:'/gh/gist/response.html/1235852/', autoLoad: true, renderer: myapp.util.Util.loaderXTemplateRenderer } });
.user img { height: 25px; width: 25px; vertical-align: middle; padding-right: 10px; } .user { font-weight: bold; }