How to add an image status or button to Extjs grid

In extjs grid, we often need to add an image status or button to summarize the methods we have used:

1. Status:
Copy codeThe Code is as follows:
Renderer: function (value ){
If (value = 0 ){
Return " ";
} Else if (value = 1 ){
Return " ";
}
Return value;
}

Add the renderer ID status in columns as follows:

Http://images.cnitblog.com/blog/489550/201304/19103818-94991d9869a6458e8a568efdea6081b5.png

Ii. event handling:

Directly add an onclick event to the img:
Copy codeThe Code is as follows:
'

The event is to pass the required data.

Another method is to add a cell click event to the grid:
Copy codeThe Code is as follows:
Listeners :{
CellClick: viewDoc
}

Function viewDoc (grid, rowIdx, codecomx, e ){
Var action = e. getTarget (). value;

}

In this way, you can get the clicked cell and add event processing.

3. You can use 'actioncolumn' to add images.
Copy codeThe Code is as follows:
{Header: 'certification ', sortable: false, width: 80, align: 'center', scope: this,

Xtype:

'Actioncolumn ',
Items :[{
Icon: '$ {ctx}/img/details.png ',
Tooltip: 'Show certification ',
Handler: function (grid, rowIndex, colIndex ){
Var record = grid. getStore (). getAt (rowIndex );
//...
}
]}

In this way, you can also add images to the grid cell.