Ext.XTemplate

最新推荐文章于 2021-08-05 15:00:54 发布

weixin_30338481

最新推荐文章于 2021-08-05 15:00:54 发布

阅读量168

点赞数

原文链接：http://www.cnblogs.com/jun3101s/p/5823955.html

版权

template 是一个 HTML 片段的模板，它可以进行预编译从来提升性能。

Xtemplate 继承自 template,Xtemplate 支持以下这些功能：

1) 如果给定的是个数组，他会自动填充，为数组总每一项重复 template 中的 block。
2) for=“.” ，会从根节点开始重复，for=“record” ，会从 record 节点开始重复。

'<tpl for="score" >' +
    '<span class="values"></span>' +
'</tpl>' +

例如，数组score，其中每一个值为values。

注：大于和小于号要使用html实体字符。

'<tpl if="price && discount">' +

'<div class="item-price"><span>{price}</span><span>{discount}</span></div>' +

'</tpl>'

例如，price && discount 为true时，显示div。

支持+ - * /等

<span class="report-blue-number">{[parseInt((values.rightNum/values.totalNum).toFixed(2) * 100)]}%</span>

<span class="report-blue-number">{[values.totalNum-values.rightNum]}</span>

任何在{[ ]}中的代码都会在 template 的作用域中被执行。生成的结果包括计算表达式和结果，其中代码中有一些特殊的变量如下：

另外，在 "{% ... %}"中的代码会被直接插入到 template 生成的代码中，这些代码块没有输出，它们可以做一些简单的操作，例如，在循环中 break/continue，或者，控制构造函数或方法的调用（要求它们没有输出）。

自定义函数需要写在 Xtemplate 内部，写在html代码之后，用逗号隔开。

tpl: new Ext.XTemplate(
    html code,
    {
        starClass: function (values) {},
        isPassed: function (defeatNum) {}
    }
)

html行间属性调用该函数时使用class=“this.startClass(vaules)”，内容显示时{variable}，函数输出内容时{[fu]}。

'<p class="this.setPriceCls(values.transaction_date)">{[Formatter.toFixed(values.price,1)]}</p>'

1）template 中出现空的 div 效果如图：

‘<div >’,
‘<tpl if = “entryType”=="money_fund"”>’,’<tpl>’,
‘</div >’,

原因：先声明了 DIV，后进行的判断，所以无论 IF 是否为真，都会有一个 DIV 块。
将 DIV 块放入 tpl 中即可，代码如下：

‘<tpl if = “entryType”=="money_fund"”>’,
‘<div >’, ‘</div >’,
’<tpl>’,

效果如下：
2）tpl 中断句时什么时候用“+”，什么时候用“，”
“+”：
没有“[]“时，断句要用“+”，如下：

tpl: '<div class="investment-portfolio-buysellpoint-head">' +
'</div>',

“，”：
有”[]“时，断句可以用“，”，如下：

itemTpl: [
'<div>',
'</div>'
],

3）设置tpl时，需要同时设置data，否则会造成数据不渲染。
4）使用tpl+data形式是，不是使用updateData方法，否则会造成数据不渲染。

1)参数的调用：
<tpl>{notifyingAt}</tpl>
其中：notifyingAt 为一个参数
参数可以做简单的四则样式，比如有一个 age 参数，我要算一算他 3 年以后是几岁的话:

2)函数的调用：

<tpl>{[Ext.Date.format(new Date(),"Y-m-d")]}</tpl>

3)函数中参数的调用：
<tpl>{[Ext.Date.format(value.notifyingAt,"Y-m-d")]}</tpl>

4)if else:

<tpl if="this.isBought(values.isBought)">

    // if

<tpl else>

    //else

</tpl>

转载于:https://www.cnblogs.com/jun3101s/p/5823955.html

关注