ExtJS render用法详解
作者：技术拾光时间：2026-06-10 08:21:12浏览：509
在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）。也就是说，表格里所有的数据，你都能随便调用。想想看，这能玩出多少花样。
完整代码示例
复制代码 代码如下: