    /**
     * A template class that supports advanced functionality like:
     *
     * - Autofilling arrays using templates and sub-templates
     * - Conditional processing with basic comparison operators
     * - Basic math function support
     * - Execute arbitrary inline code with special built-in template variables
     * - Custom member functions
     * - Many special tags and built-in operators that aren't defined as part of the API, but are supported in the templates that can be created
     *
     * XTemplate provides the templating mechanism built into:
     *
     * - {@link Ext.view.View}
     *
     * The {@link Ext.Template} describes the acceptable parameters to pass to the constructor. The following examples
     * demonstrate all of the supported features.
     *
     * # Sample Data
     *
     * This is the data object used for reference in each code example:
     *
     *     var data = {
     *         name: 'Tommy Maintz',
     *         title: 'Lead Developer',
     *         company: 'Sencha Inc.',
     *         email: 'tommy@sencha.com',
     *         address: '5 Cups Drive',
     *         city: 'Palo Alto',
     *         state: 'CA',
     *         zip: '44102',
     *         drinks: ['Coffee', 'Soda', 'Water'],
     *         kids: [
     *             {
     *                 name: 'Joshua',
     *                 age:3
     *             },
     *             {
     *                 name: 'Matthew',
     *                 age:2
     *             },
     *             {
     *                 name: 'Solomon',
     *                 age:0
     *             }
     *         ]
     *     };
     *
     * # Auto filling of arrays
     *
     * The **tpl** tag and the **for** operator are used to process the provided data object:
     *
     * - If the value specified in for is an array, it will auto-fill, repeating the template block inside the tpl
     *   tag for each item in the array.
     * - If for="." is specified, the data object provided is examined.
     * - While processing an array, the special variable {#} will provide the current array index + 1 (starts at 1, not 0).
     *
     * Examples:
     *
     *     <tpl for=".">...</tpl>       // loop through array at root node
     *     <tpl for="foo">...</tpl>     // loop through array at foo node
     *     <tpl for="foo.bar">...</tpl> // loop through array at foo.bar node
     *
     * Using the sample data above:
     *
     *     var tpl = new Ext.XTemplate(
     *         '<p>Kids: ',
     *         '<tpl for=".">',       // process the data.kids node
     *             '<p>{#}. {name}</p>',  // use current array index to autonumber
     *         '</tpl></p>'
     *     );
     *     tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object
     *
     * An example illustrating how the **for** property can be leveraged to access specified members of the provided data
     * object to populate the template:
     *
     *     var tpl = new Ext.XTemplate(
     *         '<p>Name: {name}</p>',
     *         '<p>Title: {title}</p>',
     *         '<p>Company: {company}</p>',
     *         '<p>Kids: ',
     *         '<tpl for="kids">',     // interrogate the kids property within the data
     *             '<p>{name}</p>',
     *         '</tpl></p>'
     *     );
     *     tpl.overwrite(panel.body, data);  // pass the root node of the data object
     *
     * Flat arrays that contain values (and not objects) can be auto-rendered using the special **`{.}`** variable inside a
     * loop. This variable will represent the value of the array at the current index:
     *
     *     var tpl = new Ext.XTemplate(
     *         '<p>{name}\'s favorite beverages:</p>',
     *         '<tpl for="drinks">',
     *             '<div> - {.}</div>',
     *         '</tpl>'
     *     );
     *     tpl.overwrite(panel.body, data);
     *
     * When processing a sub-template, for example while looping through a child array, you can access the parent object's
     * members via the **parent** object:
     *
     *     var tpl = new Ext.XTemplate(
     *         '<p>Name: {name}</p>',
     *         '<p>Kids: ',
     *         '<tpl for="kids">',
     *             '<tpl if="age &gt; 1">',
     *                 '<p>{name}</p>',
     *                 '<p>Dad: {parent.name}</p>',
     *             '</tpl>',
     *         '</tpl></p>'
     *     );
     *     tpl.overwrite(panel.body, data);
     *
     * # Conditional processing with basic comparison operators
     *
     * The **tpl** tag and the **if** operator are used to provide conditional checks for deciding whether or not to render
     * specific parts of the template. Notes:
     *
     * - Double quotes must be encoded if used within the conditional
     * - There is no else operator -- if needed, two opposite if statements should be used.
     *
     * Examples:
     *
     *     <tpl if="age > 1 && age < 10">Child</tpl>
     *     <tpl if="age >= 10 && age < 18">Teenager</tpl>
     *     <tpl if="this.isGirl(name)">...</tpl>
     *     <tpl if="id==\'download\'">...</tpl>
     *     <tpl if="needsIcon"><img src="{icon}" class="{iconCls}"/></tpl>
     *     // no good:
     *     <tpl if="name == "Tommy"">Hello</tpl>
     *     // encode " if it is part of the condition, e.g.
     *     <tpl if="name == &quot;Tommy&quot;">Hello</tpl>
     *
     * Using the sample data above:
     *
     *     var tpl = new Ext.XTemplate(
     *         '<p>Name: {name}</p>',
     *         '<p>Kids: ',
     *         '<tpl for="kids">',
     *             '<tpl if="age &gt; 1">',
     *                 '<p>{name}</p>',
     *             '</tpl>',
     *         '</tpl></p>'
     *     );
     *     tpl.overwrite(panel.body, data);
     *
     * # Basic math support
     *
     * The following basic math operators may be applied directly on numeric data values:
     *
     *     + - * /
     *
     * For example:
     *
     *     var tpl = new Ext.XTemplate(
     *         '<p>Name: {name}</p>',
     *         '<p>Kids: ',
     *         '<tpl for="kids">',
     *             '<tpl if="age &gt; 1">',  // <-- Note that the > is encoded
     *                 '<p>{#}: {name}</p>',  // <-- Auto-number each item
     *                 '<p>In 5 Years: {age+5}</p>',  // <-- Basic math
     *                 '<p>Dad: {parent.name}</p>',
     *             '</tpl>',
     *         '</tpl></p>'
     *     );
     *     tpl.overwrite(panel.body, data);
     *
     * # Execute arbitrary inline code with special built-in template variables
     *
     * Anything between `{[ ... ]}` is considered code to be executed in the scope of the template. There are some special
     * variables available in that code:
     *
     * - **values**: The values in the current scope. If you are using scope changing sub-templates,
     *   you can change what values is.
     * - **parent**: The scope (values) of the ancestor template.
     * - **xindex**: If you are in a looping template, the index of the loop you are in (1-based).
     * - **xcount**: If you are in a looping template, the total length of the array you are looping.
     *
     * This example demonstrates basic row striping using an inline code block and the xindex variable:
     *
     *     var tpl = new Ext.XTemplate(
     *         '<p>Name: {name}</p>',
     *         '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
     *         '<p>Kids: ',
     *         '<tpl for="kids">',
     *             '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
     *             '{name}',
     *             '</div>',
     *         '</tpl></p>'
     *      );
     *     tpl.overwrite(panel.body, data);
     *
     * # Template member functions
     *
     * One or more member functions can be specified in a configuration object passed into the XTemplate constructor for
     * more complex processing:
     *
     *     var tpl = new Ext.XTemplate(
     *         '<p>Name: {name}</p>',
     *         '<p>Kids: ',
     *         '<tpl for="kids">',
     *             '<tpl if="this.isGirl(name)">',
     *                 '<p>Girl: {name} - {age}</p>',
     *             '</tpl>',
     *              // use opposite if statement to simulate 'else' processing:
     *             '<tpl if="this.isGirl(name) == false">',
     *                 '<p>Boy: {name} - {age}</p>',
     *             '</tpl>',
     *             '<tpl if="this.isBaby(age)">',
     *                 '<p>{name} is a baby!</p>',
     *             '</tpl>',
     *         '</tpl></p>',
     *         {
     *             // XTemplate configuration:
     *             disableFormats: true,
     *             // member functions:
     *             isGirl: function(name){
     *                return name == 'Sara Grace';
     *             },
     *             isBaby: function(age){
     *                return age < 1;
     *             }
     *         }
     *     );
     *     tpl.overwrite(panel.body, data);
     */
    Ext.define('Ext.XTemplate', {

        /* Begin Definitions */

        extend: 'Ext.Template',

        /* End Definitions */

        argsRe: /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,
        nameRe: /^<tpl\b[^>]*?for="(.*?)"/,
        ifRe: /^<tpl\b[^>]*?if="(.*?)"/,
        execRe: /^<tpl\b[^>]*?exec="(.*?)"/,
        constructor: function() {
            this.callParent(arguments);

            var me = this,
                html = me.html,
                argsRe = me.argsRe,
                nameRe = me.nameRe,
                ifRe = me.ifRe,
                execRe = me.execRe,
                id = 0,
                tpls = [],
                VALUES = 'values',
                PARENT = 'parent',
                XINDEX = 'xindex',
                XCOUNT = 'xcount',
                RETURN = 'return ',
                WITHVALUES = 'with(values){ ',
                m, matchName, matchIf, matchExec, exp, fn, exec, name, i;

            html = ['<tpl>', html, '</tpl>'].join('');

            while ((m = html.match(argsRe))) {
                exp = null;
                fn = null;
                exec = null;
                matchName = m[0].match(nameRe);
                matchIf = m[0].match(ifRe);
                matchExec = m[0].match(execRe);

                exp = matchIf ? matchIf[1] : null;
                if (exp) {
                    fn = Ext.functionFactory(VALUES, PARENT, XINDEX, XCOUNT, WITHVALUES + 'try{' + RETURN + Ext.String.htmlDecode(exp) + ';}catch(e){return;}}');
                }

                exp = matchExec ? matchExec[1] : null;
                if (exp) {
                    exec = Ext.functionFactory(VALUES, PARENT, XINDEX, XCOUNT, WITHVALUES + Ext.String.htmlDecode(exp) + ';}');
                }

                name = matchName ? matchName[1] : null;
                if (name) {
                    if (name === '.') {
                        name = VALUES;
                    } else if (name === '..') {
                        name = PARENT;
                    }
                    name = Ext.functionFactory(VALUES, PARENT, 'try{' + WITHVALUES + RETURN + name + ';}}catch(e){return;}');
                }

                tpls.push({
                    id: id,
                    target: name,
                    exec: exec,
                    test: fn,
                    body: m[1] || ''
                });

                html = html.replace(m[0], '{xtpl' + id + '}');
                id = id + 1;
            }

            for (i = tpls.length - 1; i >= 0; --i) {
                me.compileTpl(tpls[i]);
            }
            me.master = tpls[tpls.length - 1];
            me.tpls = tpls;
        },

        // @private
        applySubTemplate: function(id, values, parent, xindex, xcount) {
            var me = this, t = me.tpls[id];
            return t.compiled.call(me, values, parent, xindex, xcount);
        },

        /**
         * @cfg {RegExp} codeRe
         * The regular expression used to match code variables. Default: matches {[expression]}.
         */
        codeRe: /\{\[((?:\\\]|.|\n)*?)\]\}/g,

        /**
         * @cfg {Boolean} compiled
         * Only applies to {@link Ext.Template}, XTemplates are compiled automatically.
         */

        re: /\{([\w-\.\#]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?(\s?[\+\-\*\/]\s?[\d\.\+\-\*\/\(\)]+)?\}/g,

        // @private
        compileTpl: function(tpl) {
            var fm = Ext.util.Format,
                me = this,
                useFormat = me.disableFormats !== true,
                body, bodyReturn, evaluatedFn;

            function fn(m, name, format, args, math) {
                var v;
                // name is what is inside the {}
                // Name begins with xtpl, use a Sub Template
                if (name.substr(0, 4) == 'xtpl') {
                    return "',this.applySubTemplate(" + name.substr(4) + ", values, parent, xindex, xcount),'";
                }
                // name = "." - Just use the values object.
                if (name == '.') {
                    // filter to not include arrays/objects/nulls
                    v = 'Ext.Array.indexOf(["string", "number", "boolean"], typeof values) > -1 || Ext.isDate(values) ? values : ""';
                }

                // name = "#" - Use the xindex
                else if (name == '#') {
                    v = 'xindex';
                }
                else if (name.substr(0, 7) == "parent.") {
                    v = name;
                }
                // name has a . in it - Use object literal notation, starting from values
                else if (name.indexOf('.') != -1) {
                    v = "values." + name;
                }

                // name is a property of values
                else {
                    v = "values['" + name + "']";
                }
                if (math) {
                    v = '(' + v + math + ')';
                }
                if (format && useFormat) {
                    args = args ? ',' + args : "";
                    if (format.substr(0, 5) != "this.") {
                        format = "fm." + format + '(';
                    }
                    else {
                        format = 'this.' + format.substr(5) + '(';
                    }
                }
                else {
                    args = '';
                    format = "(" + v + " === undefined ? '' : ";
                }
                return "'," + format + v + args + "),'";
            }

            function codeFn(m, code) {
                // Single quotes get escaped when the template is compiled, however we want to undo this when running code.
                return "',(" + code.replace(me.compileARe, "'") + "),'";
            }

            bodyReturn = tpl.body.replace(me.compileBRe, '\\n').replace(me.compileCRe, "\\'").replace(me.re, fn).replace(me.codeRe, codeFn);
            body = "evaluatedFn = function(values, parent, xindex, xcount){return ['" + bodyReturn + "'].join('');};";
            eval(body);

            tpl.compiled = function(values, parent, xindex, xcount) {
                var vs,
                    length,
                    buffer,
                    i;

                if (tpl.test && !tpl.test.call(me, values, parent, xindex, xcount)) {
                    return '';
                }

                vs = tpl.target ? tpl.target.call(me, values, parent) : values;
                if (!vs) {
                   return '';
                }

                parent = tpl.target ? values : parent;
                if (tpl.target && Ext.isArray(vs)) {
                    buffer = [];
                    length = vs.length;
                    if (tpl.exec) {
                        for (i = 0; i < length; i++) {
                            buffer[buffer.length] = evaluatedFn.call(me, vs[i], parent, i + 1, length);
                            tpl.exec.call(me, vs[i], parent, i + 1, length);
                        }
                    } else {
                        for (i = 0; i < length; i++) {
                            buffer[buffer.length] = evaluatedFn.call(me, vs[i], parent, i + 1, length);
                        }
                    }
                    return buffer.join('');
                }

                if (tpl.exec) {
                    tpl.exec.call(me, vs, parent, xindex, xcount);
                }
                return evaluatedFn.call(me, vs, parent, xindex, xcount);
            };

            return this;
        },

        // inherit docs from Ext.Template
        applyTemplate: function(values) {
            return this.master.compiled.call(this, values, {}, 1, 1);
        },

        /**
         * Does nothing. XTemplates are compiled automatically, so this function simply returns this.
         * @return {Ext.XTemplate} this
         */
        compile: function() {
            return this;
        }
    }, function() {
        // re-create the alias, inheriting it from Ext.Template doesn't work as intended.
        this.createAlias('apply', 'applyTemplate');
    });