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;
}

jsFiddle