extjs gridPanel columnModel renderer笔记

Extjs columnModel为gridPanel的列模型，默认情况下只将dataIndex对应其store的数据按文本格式显示在表格里，可以通过一个renderer属性定义一个function将要显示的值自定义显示在表格在相应位置，使用方法如下：

columns:[{header: 'operation', dataIndex: 'id', renderer: operationRender}]

其中operationRender为自定义的函数名，参阅api知道可以为此函数提供六个参数，这里不列出来了。

现在需要把一列输出为一个超链接，点击可以对那条数据进行操作，于在想到在operationRender里返回一个超链接字符串即可：

var operationRender = function(value, meta, record, rowIndex, colIndex, store){
	return '<a href="javascript:void(0)" οnclick="show(' + record + ')">operation</a>';
}

结果预期所示，那一列都显示成了超链接形式，可点击超链接时无任何反应，似乎onclick事件对应的show()方法没有执行，用firebug调试发现原来执行show()方法里报错了 SyntaxError: missing ] after element list

查看超链接属性为：

<a οnclick="show([object Object])" href="javascript:void(0)"> … </a>

原来在这里show方法不支持传递对像，要一个一个的获取record的字段的值再用字符串传递，于是把operationRender改成：

var operationRender = function(value, meta, record, rowIndex, colIndex, store){
 return '<a href="javascript:void(0)" οnclick="show(\'' + record.get("patient").id + '\', \'' + record.get("patient").fullName + '\', \''

+ record.get("patient").age + '\')">operation</a>';

}



想要的数据是成功传入到show()方法里了，但出了一个问题，超链接这一列变得很宽很宽，一点也不和诣，开始怀疑是不是返回的字符串太长了，可那些字符串只是onclick的嘱性啊，在表格里显示还只是一个超链接而已。但还是采用排除法一个一个去减掉，几经调试最终找到了原因所在，是数据的问题，record.get("patient").fullName获得的是人的姓名，其中姓是加粗显示的，使用了html加粗<b></b>标记。实际上那数据也只是做为js函数的参数传递一下，并没有在页面上显示，为什么会造成这个问题，不得而知。最后解决问题的方法就是把<b></b>标记给去除了，于是想到了以前用过的一个去除任意html标记的正则表达式，改成：
record.get("patient").chineseFullName.replace(/<[^>].*?>/g,"")



大功告成，那一列显示正常了！