在 ExtJS 的 XTemplate 中，我们可以使用大括号包裹起来的 JavaScript 表达式来对数据进行格式化和渲染。有时候，我们希望在这些表达式中调用自定义的函数来处理数据，以获得更加灵活和定制化的效果。本文将介绍如何在 ExtJS XTemplate 中调用自定义函数。
实现方法
在 ExtJS 中，我们可以使用 XTemplate.addMember 方法向模板添加成员函数，然后在模板表达式中调用该函数。下面是一个简单的示例：
---------------------------------- ------------- - ------ --------------------------------- --- --- --- - --- -------------- ---------------- ------------------------ -- --------------
在上面的例子中，我们定义了一个叫做 reverse 的函数，它接收一个字符串参数，并返回该字符串的反转结果。然后我们在模板表达式中使用 {reverse(name)} 调用这个函数，以对 name 数据进行反转处理。
需要注意的是，在调用 XTemplate.addMember 方法之前，一定要保证 ExtJS 已经被正确加载并初始化，否则会导致找不到 Ext.XTemplate 对象而出错。
示例代码
下面是一个更加完整的示例代码，演示了如何在一个数据列表中对数据进行格式化和渲染：
--------- -----
------
------
----- ----------------
------------ --------- ------------
----- ---------------- --------------- ---------------------------------------------------------------------
------- ---------------------- --------------------------------------------------------------
-------
------
---- ---------------------
------- -----------------------
---------------------- -
-- ------
------------------------------------- -------------- -
------ --------------------- ------ --------
---
-- -----
--- ---- - -
------ -------- ------ -------------------- ----------- ------------------------
------ ------ ------ ------------------ ----------- ------------------------
------ ---------- ------ ---------------------- ----------- -----------------------
--
-- ----
--- --- - --- --------------
----------
----- ----------
-------
------------------
-------------------
--------------------------------------------------
--------
---------
-----------
-
----------- -------------------------------------
-
--
-- -----------
----------------------------------- ------
---
---------
-------
-------在这个示例中，我们定义了一个叫做 formatDate 的函数，它接收一个日期字符串参数，并将其格式化为 Y-m-d H:i:s 的形式。然后我们使用 {[this.formatDate(values.registered)]} 表达式调用该函数，对注册时间进行格式化处理。最终渲染出来的效果如下所示：
| Name | Registered | |
|---|---|---|
| Alice | alice@example.com | 2022-01-01 12:00:00 |
| Bob | bob@example.com | 2022-02-02 12:00:00 |
| Charlie | charlie@example.com | 2022-03-03 12:00:00 |
结论
在 ExtJS XTemplate 中调用自定义函数可以帮助我们实现更加灵活和定制
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27934