Javascript ExtJS X 模板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5006273/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ExtJS XTemplate
提问by hazimdikenli
I am trying to develop a FilterEditor using ExtJS. user creates some range, comparison, null/notnull criterias and I need to present them in a well-formatted format, so that users can read the overall criteria easily.
我正在尝试使用 ExtJS 开发一个 FilterEditor。用户创建了一些范围、比较、空/非空标准，我需要以格式良好的格式呈现它们，以便用户可以轻松阅读整体标准。
For this, I tought Ext.DataView and XTemplates would do the trick. But I am wondering if I can provide more than one template to makes templates maintainable, or use some built-in functionality to select a piece of the template for me.
为此，我认为 Ext.DataView 和 XTemplates 可以解决问题。但是我想知道我是否可以提供多个模板来使模板可维护，或者使用一些内置功能为我选择模板的一部分。
var dateRangeTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div id="{CriteriaId}">',
'<em>{FieldName} </em>',
'<span>{Modifier} </span>',
'<span>{Condition} </span>',
'<span>{LeftDate} </span>',
'<span>{RightDate} </span>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>'
var notNullTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div id="{CriteriaId}">',
'<em>{FieldName} </em>',
'<span>{Modifier} </span>',
'<span>{Condition} </span>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>'
output:
输出：
Invoice Date not between 2011-01-01 2011-01-31
Invoice Date not null
There will be a lot of templates, I am thinking of providing some inline data editors, so most probably this will grow in numbers. I know I can do some simple blocks it might grow big and complicated so I wanted some opinions before I dive into it.
会有很多模板，我正在考虑提供一些内联数据编辑器，所以很可能这会增加数量。我知道我可以做一些简单的块，它可能会变得又大又复杂，所以在深入研究之前我想征求一些意见。
回答by Rene Saarsoo
I think the most powerful aspect of templates are template member functions that you can call within your template. With these the possibilities are endless. For example you can use them to render other subtemplates within your main template:
我认为模板最强大的方面是您可以在模板中调用的模板成员函数。有了这些，可能性是无限的。例如，您可以使用它们在主模板中呈现其他子模板：
var mainTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="container">',
'{[this.renderItem(values)]}',
'</div>',
'</tpl>',
{
renderItem: function(values) {
if (values instanceof DateRange) {
return dateRangeTpl.apply(values);
}
else {
return notNullTpl.apply(values);
}
}
}
);
For a great overview of templates check out Sencha conference video: Advanced Templates for Ext JS.
有关模板的精彩概述，请查看 Sencha 会议视频：Ext JS 的高级模板。
回答by Bipil Raut
Template also in row expander on the grid.
模板也在网格上的行扩展器中。
Please find below code , I used in my project.
请找到下面的代码，我在我的项目中使用过。
this.expander = new Ext.grid.RowExpander({
tpl : new Wtf.XTemplate(
'<table border="0" class="iemediumtablewidth" >',
'<tr>',
'<td class="iedaynametd" width="200">',
'<table border="0">',
'<tr align="center">',
'<th><b>'+values+'</b></th>',
'</tr>',
'<tpl for="dayname">',
'<tr align="left">',
'<td>',
'{.}',
'</td>',
'</tr>',
'</tpl>',
'</table>',
'</td>',
)};