- 论坛徽章:
- 0
|
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> |
|