ExtJS render用法详解

作者：技术拾光

时间：2026-06-10

在ExtJSGrid中，renderer用于格式化列数据，包含六个重要参数：value（单元格值）、cellmeta（单元格标识与样式）、record（当前行数据）、rowIndex（行号，考虑分页）、columnIndex（列号）和store（整个数据源）。通过配置列的renderer函数，可灵活实现个性化显示效果。用户可利用该渲染函数定制单元格内容。

文章目录

要理解ExtJS Grid里renderer的用法，拿一个实际例子来说，就清晰多了。

先看ColumnModel的配置。当你定义表格的列时，每一列的显示方式，其实都能通过renderer做精细控制。

复制代码代码如下:

 var cm = new Ext.grid.ColumnModel( 
 [ 
 new Ext.grid.RowNumberer({ header: "", width: 20, align: 'center' }), 
 { header: '', align: 'center', dataIndex: 'AccountAndRoseID', width: 50, sortable: true, hidden: true }, 
 { header: '', align: 'center', dataIndex: 'UserAccountId', width: 50, sortable: true, hidden: true }, 
 { header: '帐号', align: 'center', dataIndex: 'UserAccountName', width: 200, sortable: true }, 
 { header: '角色名', align: 'center', dataIndex: 'UserRoleName', width: 200, sortable: true }, 
 { header: '状态', align: 'center', dataIndex: 'UserAccountStateId', width: 200, sortable: true, hidden: true, renderer: function() } 
 ]

简单来说，renderer就是用来格式化列数据的，甚至按你的脚本逻辑输出现成内容。

renderer的参数详解

那么，renderer到底怎么用？关键在于理解它的参数。

复制代码代码如下:

 renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
 }

这6个参数各有各的用处：

1. value

当前单元格的值，最常用的那个。

2. cellmeta

保存了类似cellId这样的信息，用于标识单元格，附带CSS样式控制。这里的id具体怎么用，其实可以在更多场景中试验。

3. record

这个参数很关键——它代表当前行的所有数据。你要拿到某个字段的值，直接record.data["id"]就能搞定。

4. rowIndex

行号，但要注意，它并不是简单的从头到尾顺序编号，而是考虑了分页后的结果，这个细节容易踩坑。

5. columnIndex

列号，没太多好说的，直白。

6. store

这个参数最强，它直接带出了你构造表格时传递的整个数据源（ds）。也就是说，表格里所有的数据，你都能随便调用。想想看，这能玩出多少花样。

完整代码示例

复制代码代码如下:

03.grid

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›

图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›

上一篇：IE下ComboBox和DateField消失的解决方法下一篇：ExtJs实现动态加载Grid完整示例