ExtJS教程：使用Grid显示数据与自定义单元格渲染

"本教程继续讲解Extjs第五章关于使用grid显示数据的第二部分，重点关注单元格渲染器的使用，包括内置的cellrenderer和自定义的单元格渲染，以实现数据的格式化和增强数据展示的功能。" 在ExtJS中，grid组件是用于展示大量结构化数据的强大工具。在显示数据时，我们可能需要对某些单元格进行特殊处理，比如格式化日期、货币或根据特定需求定制显示内容。这就是单元格渲染器(cellrenderer)的作用所在。 1. 使用内置的cellrenderer格式化数据： ExtJS提供了一系列内置的渲染函数，如`dateRenderer`用于日期格式化，`usMoney`用于货币格式化，以及大小写的转换函数等。例如，我们可以使用`dateRenderer`来将日期字段显示为美国标准的日期格式'月/日/年'，代码如下： ```javascript renderer: Ext.util.Format.dateRenderer('m/d/Y') ``` 2. 自定义单元格渲染器： 当内置的渲染器无法满足需求时，我们可以编写自己的渲染函数。以查询数据存储(datastore)为例，假设我们有一个名为'genre'的列，其值是数字，但我们需要显示与这些数字对应的文本描述。首先，在column model中添加renderer配置，指定渲染函数： ```javascript {header: 'Genre', dataIndex: 'genre', renderer: genre_name} ``` 接下来，编写`genre_name`函数，它接收单元格的值作为参数，并通过查询datastore找到匹配的记录，返回对应的文本： ```javascript function genre_name(val) { var genres = ... // 获取之前章节创建的simpleStore return genres.queryBy(function(rec) { if (rec.data.id == val) { return true; } else { return false; } }).itemAt(0).data.genre; } ``` 这个函数遍历datastore，找到与单元格值相匹配的记录，然后返回该记录的'genre'属性，从而将数值转换为用户友好的文本。 通过这种方式，我们可以根据需求灵活地对grid中的数据进行格式化和展示，不仅增强了数据的可读性，还能提供更丰富的信息。在实际开发中，自定义单元格渲染器是一个常用技巧，它可以帮助我们构建更加定制化的数据展示界面，满足各种复杂场景的需求。