[英]ExtJS XTemplate
我正在尝试使用ExtJS开发FilterEditor。 用户创建一些范围,比较,null / notnull标准,我需要以格式良好的格式呈现它们,以便用户可以轻松地阅读整体标准。
为此,我尝试了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>'
输出:
Invoice Date not between 2011-01-01 2011-01-31
Invoice Date not null
会有很多模板,我正在考虑提供一些内联数据编辑器,所以很可能这会增加数量。 我知道我可以做一些简单的块,它可能会变得越来越复杂,所以在我深入了解之前我想要一些意见。
我认为模板最强大的方面是模板成员函数,您可以在模板中调用它们。 有了这些可能性是无穷无尽的。 例如,您可以使用它们来渲染主模板中的其他子模板:
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);
}
}
}
);
有关模板的精彩概述,请查看Sencha会议视频: Ext JS的高级模板 。
模板也在网格上的行扩展器中。
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>', )};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.