The member function renderImage() is called using the format {images:this.renderImage}. How?

xtemplates-with-member-functions.js

var templateFunctions = {
    renderImage: function(images) {
        if (Ext.isArray(images) && images[2]) {
            var img = images[2];
            return String.format('<img src="{0}" />', img.url, img.width, img.height);
        } else {
            return '';
        }
    },
    renderPrice: function(price, values) {
        var salePrice = values.salePrice;
        if (salePrice) {
            return '<del>' + values.priceLabel + '</del> ' + values.salePriceLabel;
        } else {
            return values.priceLabel;
        }
    }
};

SS.ProductListPanel = Ext.extend(Ext.Panel, {
    cls: 'productlist-panel',
    
    landscapeProductTpl: new Ext.XTemplate(
        '<div class="productlist-container">',
        '<tpl for=".">',
            '{[ xindex == 1 || xindex % 2 == 1 ? "<div class=\'boxFlexible vbox\'>" : ""]}',
            '<div class="productlist-item boxFlexible vbox {[ values === true ? "productlist-item-empty" : ""]}">',
                '<div class="productlist-item-img boxFlexible">{images:this.renderImage}</div>',
                '<div class="productlist-item-text">',
                    '<span>{name}</span>',
                    '<span>{price:this.renderPrice} - {retailer}</span>',
                '</div>',
            '</div>',
            '{[ xindex == xcount && xindex % 2 == 1 ? "<div></div>" : ""]}',
            '{[ xindex == xcount || xindex % 2 == 0 ? "</div>" : ""]}',
        '</tpl>',
        '</div>',
        templateFunctions
    ),
    
    portraitProductTpl: new Ext.XTemplate(
        '<div class="productlist-container">',
        '<tpl for=".">',
            '{[ xindex == 1 || xindex % 3 == 1 ? "<div class=\'boxFlexible hbox\'>" : ""]}',
            '<div class="productlist-item boxFlexible vbox {[ values === true ? "productlist-item-empty" : ""]}">',
                '<div class="productlist-item-img boxFlexible">{images:this.renderImage}</div>',
                '<div class="productlist-item-text">',
                    '<span>{name}</span>',
                    '<span>{price:this.renderPrice} - {retailer}</span>',
                '</div>',
            '</div>',
            '{[ xindex == xcount && xindex % 3 == 2 ? "<div></div>" : ""]}',
            '{[ xindex == xcount && xindex % 3 == 1 ? "<div></div><div></div>" : ""]}',
            '{[ xindex == xcount || xindex % 3 == 0 ? "</div>" : ""]}',
        '</tpl>',
        '</div>',
        templateFunctions
    ),
});