See: http://extjs.com/deploy/ext/docs/output/Ext.grid.ColumnModel.html#config-renderer
It's not that hard to use:
<script>
Ext.namespace('Ext.ExampleData');
Ext.ExampleData.Links = [
["ExtJS", "One", "http://www.extjs.com"],
["Google", "Two", "http://www.google.com"]
];
var Example = function(){
return{
init : function(){
var DataRecord = Ext.data.Record.create([
{name: 'LinkName', type: 'string'},
{name: 'LinkDummyField', type: 'string'},
{name: 'LinkURL', type: 'string'}
]);
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(Ext.ExampleData.Links),
reader: new Ext.data.ArrayReader({}, DataRecord)
});
function renderLink(value, cell, row, rowIndex, colIndex, ds){
var html = '<a href="{0}">{1}</a>';
return String.format(html, ds.getById(row.id).data['LinkURL'], value);
}
var cm = new Ext.grid.ColumnModel([
{header: "Link", width: 200, sortable: true, renderer: renderLink, dataIndex: 'LinkName'},
{header: "Test", width: 200, dataIndex: 'LinkDummyField'}
]);
var grid = new Ext.grid.Grid('grid-data',
{ds: ds, cm: cm, sm: new Ext.grid.CellSelectionModel({singleSelect:true})}
);
var layout = Ext.BorderLayout.create(
{center: {margins:{left:3,top:3,right:3,bottom:3},panels: [new Ext.GridPanel(grid)]}},
'grid-panel'
);
grid.render();
ds.load();
}
}
}();
Ext.onReady(Example.init, Example);
</script>
</head>
<body>
<div id="grid-panel" style="width:410;height:300px;">
<div id="grid-data"></div>
</div>
</body>
</html>
I'd imagine though you would not want it to look like this, so take a look at the cell parameter in setRenderer (http://extjs.com/deploy/ext/docs/output/Ext.grid.ColumnModel.html#setRenderer)
Also useful: cellclick (http://extjs.com/deploy/ext/docs/output/Ext.grid.Grid.html#event-cellclick) and rowclick (http://extjs.com/deploy/ext/docs/output/Ext.grid.Grid.html#event-rowclick)