/**
 *
 */
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);
        }
    }
});