Ext 2.0 XTemleate API 提前预览

杨竹青

EXT 2.0 最新 Ext.XTemplate类文档，刚从SVN弄下来看，1.x有许多限制的地方，现在都做好了。
p.s. 用在JS Server-side的MVC中的View层也不错...

Java代码
/**   
* @class Ext.XTemplate   
* <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 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  
    }]   
};   
</cpde></pre>   
* <p><b>Auto filling of arrays and scope switching.</b> Using the <code>tpl</code> tag and the <code>for</code> operator,   
* you can switch to the scope of the object specified by <code>for</code> and access its members to populate the teamplte.   
* If the variable in <code>for</code> is an array, it will auto-fill, repeating the template block inside the <code>tpl</tpl>   
* 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> When processing a sub-template, for example while  
* looping through a child array, you can access the parent object's members via the <code>parent</code> 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> While processing an array, the special variable <code>#</code>   
* 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">',   
            '<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);   
</code></pre>   
* <p><b>Auto-rendering of flat arrays.</b> Flat arrays that contain values (and not objects) can be auto-rendered   
* using the special <code>{.}</code> 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> Using the <code>tpl</code> tag and the<code>if</code>   
* operator you can provide conditional checks for deciding whether or not to render specific parts of the template.   
* Note that there is no <code>else</not> operator -- if needed, you should use two opposite <code>if</code> 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">',   
        '<tpl if="age > 1">',  // <-- Note that the > is encoded   
            '<p>{name}</p>',   
        '</tpl>',   
    '</tpl></p>'  
);   
tpl.overwrite(panel.body, data);   
</code></pre>   
* <p><b>Ability to execute arbitrary code in memory and apply template configs.</b> Any objects passed into the XTemplate   
* constructor will get applied to the template just like any another config in Ext.  Using the <code>tpl</code> tag   
* and the<code>exec</code> operator you can execute any inline code you want, and will be able to specify config   
* values that can be used as external parameters to the <code>exec</code> code:</p>   
* <pre><code>   
var tpl = new Ext.XTemplate(   
    '<h2>Kids</h2>',   
    '<tpl for="kids">',   
        '<tpl exec="++this.index"></tpl>',   
        '<p>{this.index}. {name}</p>',   
    '</tpl></p>',   
    {index: 0}  // <-- "applied" like standard Ext config   
);   
tpl.overwrite(panel.body, data);   
</code></pre>   
* <p><b>Ability to run arbitrary inline code to return a value.</b> Whereas exec can execute code in memory,   
* the special <code>{[ ]}</code> tags can evaluate code to output a value directly inline without requiring a   
* separate function call.  This example demonstrates basic row striping using this technique:</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> One or more member functions can 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>