Subversion Repositories eFlore/Applications.cel

/*

 * Ext JS Library 2.0.2

 * Copyright(c) 2006-2008, Ext JS, LLC.

 * licensing@extjs.com

 *

 * http://extjs.com/license

 */

/**

* @class Ext.XTemplate

* @extends Ext.Template

* <p>A template class that supports advanced functionality like autofilling arrays, conditional processing with

* basic comparison operators, sub-templates, basic math function support, special built-in template variables,

* inline code execution and more.  XTemplate also provides the templating mechanism built into {@link Ext.DataView}.</p>

* <p>XTemplate supports 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.  The following examples demonstrate all of the supported features.

* This is the data object used for reference in each code example:</p>

* <pre><code>

var data = {

    name: 'Jack Slocum',

    title: 'Lead Developer',

    company: 'Ext JS, LLC',

    email: 'jack@extjs.com',

    address: '4 Red Bulls Drive',

    city: 'Cleveland',

    state: 'Ohio',

    zip: '44102',

    drinks: ['Red Bull', 'Coffee', 'Water'],

    kids: [{

        name: 'Sara Grace',

        age:3

    },{

        name: 'Zachary',

        age:2

    },{

        name: 'John James',

        age:0

    }]

};

</code></pre>

* <p><b>Auto filling of arrays and scope switching</b><br/>Using the <tt>tpl</tt> tag and the <tt>for</tt> operator,

* you can switch to the scope of the object specified by <tt>for</tt> and access its members to populate the teamplte.

* If the variable in <tt>for</tt> is an array, it will auto-fill, repeating the template block inside the <tt>tpl</tt>

* tag for each item in the array:</p>

* <pre><code>

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Title: {title}</p>',

    '<p>Company: {company}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

        '<p>{name}</p>',

    '</tpl></p>'

);

tpl.overwrite(panel.body, data);

</code></pre>

* <p><b>Access to parent object from within sub-template scope</b><br/>When processing a sub-template, for example while

* looping through a child array, you can access the parent object's members via the <tt>parent</tt> object:</p>

* <pre><code>

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

        '<tpl if="age > 1">',

            '<p>{name}</p>',

            '<p>Dad: {parent.name}</p>',

        '</tpl>',

    '</tpl></p>'

);

tpl.overwrite(panel.body, data);

</code></pre>

* <p><b>Array item index and basic math support</b> <br/>While processing an array, the special variable <tt>{#}</tt>

* will provide the current array index + 1 (starts at 1, not 0). Templates also support the basic math operators

* + - * and / that can be applied directly on numeric data values:</p>

* <pre><code>

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

        '<tpl if="age > 1">',

            '&lt;p>{#}: {name}&lt;/p>',  // <-- Auto-number each item

            '&lt;p>In 5 Years: {age+5}&lt;/p>',  // <-- Basic math

            '<p>Dad: {parent.name}</p>',

        '</tpl>',

    '</tpl></p>'

);

tpl.overwrite(panel.body, data);

</code></pre>

* <p><b>Auto-rendering of flat arrays</b> <br/>Flat arrays that contain values (and not objects) can be auto-rendered

* using the special <tt>{.}</tt> variable inside a loop.  This variable will represent the value of

* the array at the current index:</p>

* <pre><code>

var tpl = new Ext.XTemplate(

    '<p>{name}\'s favorite beverages:</p>',

    '<tpl for="drinks">',

       '<div> - {.}</div>',

    '</tpl>'

);

tpl.overwrite(panel.body, data);

</code></pre>

* <p><b>Basic conditional logic</b> <br/>Using the <tt>tpl</tt> tag and the <tt>if</tt>

* operator you can provide conditional checks for deciding whether or not to render specific parts of the template.

* Note that there is no <tt>else</tt> operator &mdash; if needed, you should use two opposite <tt>if</tt> statements.

* Properly-encoded attributes are required as seen in the following example:</p>

* <pre><code>

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

        '&lt;tpl if="age &amp;gt; 1">',  // <-- Note that the &gt; is encoded

            '<p>{name}</p>',

        '</tpl>',

    '</tpl></p>'

);

tpl.overwrite(panel.body, data);

</code></pre>

* <p><b>Ability to execute arbitrary inline code</b> <br/>In an XTemplate, anything between {[ ... ]}  is considered

* code to be executed in the scope of the template. There are some special variables available in that code:

* <ul>

* <li><b><tt>values</tt></b>: The values in the current scope. If you are using scope changing sub-templates, you

* can change what <tt>values</tt> is.</li>

* <li><b><tt>parent</tt></b>: The scope (values) of the ancestor template.</li>

* <li><b><tt>xindex</tt></b>: If you are in a looping template, the index of the loop you are in (1-based).</li>

* <li><b><tt>xcount</tt></b>: If you are in a looping template, the total length of the array you are looping.</li>

* <li><b><tt>fm</tt></b>: An alias for <tt>Ext.util.Format</tt>.</li>

* </ul>

* This example demonstrates basic row striping using an inline code block and the <tt>xindex</tt> variable:</p>

* <pre><code>

var tpl = new Ext.XTemplate(

    '<p>Name: {name}</p>',

    '<p>Company: {[company.toUpperCase() + ', ' + title]}</p>',

    '<p>Kids: ',

    '<tpl for="kids">',

       '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">,

        '{name}',

        '</div>',

    '</tpl></p>'

);

tpl.overwrite(panel.body, data);

</code></pre>

* <p><b>Template member functions</b> <br/>One or more member functions can be defined directly on the config

* object passed into the XTemplate constructor for more complex processing:</p>

* <pre><code>

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>',

        '<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>', {

     isGirl: function(name){

         return name == 'Sara Grace';

     },

     isBaby: function(age){

        return age < 1;

     }

});

tpl.overwrite(panel.body, data);

</code></pre>

* @constructor

* @param {String/Array/Object} parts The HTML fragment or an array of fragments to join(""), or multiple arguments

* to join("") that can also include a config object

*/

Ext.XTemplate = function(){

    Ext.XTemplate.superclass.constructor.apply(this, arguments);

    var s = this.html;

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

    var re = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/;

    var nameRe = /^<tpl\b[^>]*?for="(.*?)"/;

    var ifRe = /^<tpl\b[^>]*?if="(.*?)"/;

    var execRe = /^<tpl\b[^>]*?exec="(.*?)"/;

    var m, id = 0;

    var tpls = [];

    while(m = s.match(re)){

       var m2 = m[0].match(nameRe);

       var m3 = m[0].match(ifRe);

       var m4 = m[0].match(execRe);

       var exp = null, fn = null, exec = null;

       var name = m2 && m2[1] ? m2[1] : '';

       if(m3){

           exp = m3 && m3[1] ? m3[1] : null;

           if(exp){

               fn = new Function('values', 'parent', 'xindex', 'xcount', 'with(values){ return '+(Ext.util.Format.htmlDecode(exp))+'; }');

           }

       }

       if(m4){

           exp = m4 && m4[1] ? m4[1] : null;

           if(exp){

               exec = new Function('values', 'parent', 'xindex', 'xcount', 'with(values){ '+(Ext.util.Format.htmlDecode(exp))+'; }');

           }

       }

       if(name){

           switch(name){

               case '.': name = new Function('values', 'parent', 'with(values){ return values; }'); break;

               case '..': name = new Function('values', 'parent', 'with(values){ return parent; }'); break;

               default: name = new Function('values', 'parent', 'with(values){ return '+name+'; }');

           }

       }

       tpls.push({

            id: id,

            target: name,

            exec: exec,

            test: fn,

            body: m[1]||''

        });

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

       ++id;

    }

    for(var i = tpls.length-1; i >= 0; --i){

        this.compileTpl(tpls[i]);

    }

    this.master = tpls[tpls.length-1];

    this.tpls = tpls;

};

Ext.extend(Ext.XTemplate, Ext.Template, {

    // private

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

    // private

    codeRe : /\{\[((?:\\\]|.|\n)*?)\]\}/g,

    // private

    applySubTemplate : function(id, values, parent, xindex, xcount){

        var t = this.tpls[id];

        if(t.test && !t.test.call(this, values, parent, xindex, xcount)){

            return '';

        }

        if(t.exec && t.exec.call(this, values, parent, xindex, xcount)){

            return '';

        }

        var vs = t.target ? t.target.call(this, values, parent) : values;

        parent = t.target ? values : parent;

        if(t.target && Ext.isArray(vs)){

            var buf = [];

            for(var i = 0, len = vs.length; i < len; i++){

                buf[buf.length] = t.compiled.call(this, vs[i], parent, i+1, len);

            }

            return buf.join('');

        }

        return t.compiled.call(this, vs, parent, xindex, xcount);

    },

    // private

    compileTpl : function(tpl){

        var fm = Ext.util.Format;

        var useF = this.disableFormats !== true;

        var sep = Ext.isGecko ? "+" : ",";

        var fn = function(m, name, format, args, math){

            if(name.substr(0, 4) == 'xtpl'){

                return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent, xindex, xcount)'+sep+"'";

            }

            var v;

            if(name === '.'){

                v = 'values';

            }else if(name === '#'){

                v = 'xindex';

            }else if(name.indexOf('.') != -1){

                v = name;

            }else{

                v = "values['" + name + "']";

            }

            if(math){

                v = '(' + v + math + ')';

            }

            if(format && useF){

                args = args ? ',' + args : "";

                if(format.substr(0, 5) != "this."){

                    format = "fm." + format + '(';

                }else{

                    format = 'this.call("'+ format.substr(5) + '", ';

                    args = ", values";

                }

            }else{

                args= ''; format = "("+v+" === undefined ? '' : ";

            }

            return "'"+ sep + format + v + args + ")"+sep+"'";

        };

        var codeFn = function(m, code){

            return "'"+ sep +'('+code+')'+sep+"'";

        };

        var body;

        // branched to use + in gecko and [].join() in others

        if(Ext.isGecko){

            body = "tpl.compiled = function(values, parent, xindex, xcount){ return '" +

                   tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn).replace(this.codeRe, codeFn) +

                    "';};";

        }else{

            body = ["tpl.compiled = function(values, parent, xindex, xcount){ return ['"];

            body.push(tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn).replace(this.codeRe, codeFn));

            body.push("'].join('');};");

            body = body.join('');

        }

        eval(body);

        return this;

    },

    /**

     * Alias of {@link #applyTemplate}.

     */

    apply : function(values){

        return this.master.compiled.call(this, values, {}, 1, 1);

    },

    /**

     * Returns an HTML fragment of this template with the specified values applied.

     * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})

     * @return {String} The HTML fragment

     */

    applyTemplate : function(values){

        return this.master.compiled.call(this, values, {}, 1, 1);

    },

    /**

     * Compile the template to a function for optimized performance.  Recommended if the template will be used frequently.

     * @return {Function} The compiled function

     */

    compile : function(){return this;}

    /**

     * @property re

     * @hide

     */

    /**

     * @property disableFormats

     * @hide

     */

    /**

     * @method set

     * @hide

     */

});

/**

 * Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.

 * @param {String/HTMLElement} el A DOM element or its id

 * @return {Ext.Template} The created template

 * @static

 */

Ext.XTemplate.from = function(el){

    el = Ext.getDom(el);

    return new Ext.XTemplate(el.value || el.innerHTML);

};