Extjs gridに画像の状態またはボタンを追加する方法

extjsのgridにはよく写真の状態やボタンを追加して、自分で使った方法をまとめてみます。一、状態表示：

 
renderer:function(value){ 
if(value==0){ 
return "<img src='images/icons/cancel.png'>"; 
}else if(value==1){ 
return "<img src='images/icons/accept.png'>"; 
} 
return value; 
} 

はcolumnsにレンダーの標識状態を列に追加します。効果図は以下の通りです。http://images.cnitblog.com/blog/489550/201304/19103818-94991d9869a6458e8a568efdea6081b5.png 二、イベント処理：直接にオンロックイベントを追加する：

 
<img style="cursor:pointer;" onclick="updateRecord(\''+sn+"@"+ss+"@"+record.get("standardId")+'\');" src=\'${ctx}/img/edit.png\' alt=\'    \' title=\'    \'>' 

イベントは必要なデータを転送することです。もう一つの方法はgridにセルを追加してイベントをクリックすることです。

 
listeners: { 
cellClick: viewDoc 
} 

function viewDoc(grid, rowIdx, colIdx, e) { 
var action = e.getTarget().value; 

} 

このようにすればクリックしたセルが得られ、イベントを追加して処理すればいいです。三、'actionolumn'を使用して写真ボタン

 
{header:'   ',sortable:false,width:80,align:'center',scope:this, 

xtype: 

'actioncolumn', 
items : [{ 
icon : '${ctx}/img/details.png', 
tooltip : '     ', 
handler : function(grid, rowIndex, colIndex) { 
var record = grid.getStore().getAt(rowIndex); 
//。。。 
} 
]} 

を追加することができます。これにより、gridセルに画像を追加することもできます。