/**
 *
 */
Ext.define('Ext.mixin.Templatable', {
    extend: 'Ext.Mixin',
 
    mixinConfig: {
        id: 'templatable'
    },
 
    referenceAttributeName: 'reference',
 
    referenceSelector: '[reference]',
 
    getElementConfig: function() {
        return {
            reference: 'element'
        };
    },
 
    getElementTemplate: function() {
        var elementTemplate = document.createDocumentFragment();
        
        elementTemplate.appendChild(Ext.Element.create(this.getElementConfig(), true));
        
        return elementTemplate;
    },
 
    initElement: function() {
        var prototype = this.self.prototype;
 
        prototype.elementTemplate = this.getElementTemplate();
        prototype.initElement = prototype.doInitElement;
 
        this.initElement.apply(this, arguments);
    },
 
    linkElement: function(reference, node) {
        this.link(reference, node);
    },
 
    doInitElement: function() {
        var referenceAttributeName = this.referenceAttributeName,
            renderElement, referenceNodes, i, ln, referenceNode, reference;
 
        renderElement = this.elementTemplate.cloneNode(true);
        referenceNodes = renderElement.querySelectorAll(this.referenceSelector);
 
        for (i = 0, ln = referenceNodes.length; i < ln; i++) {
            referenceNode = referenceNodes[i];
            reference = referenceNode.getAttribute(referenceAttributeName);
            referenceNode.removeAttribute(referenceAttributeName);
            this.linkElement(reference, referenceNode);
        }
    }
});