Hi,
here some example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ExtJs - Grid - Links</title>
<!-- Include YUI utilities and Ext: -->
<script type="text/javascript" src="web/js/ext1_1_1/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="web/js/ext1_1_1/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="web/js/ext1_1_1/ext-all-debug.js"></script>
<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="web/js/ext1_1_1/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="web/js/ext1_1_1/resources/css/ytheme-vista.css">
<!-- Init namespace -->
<script type="text/javascript">
Ext.onReady(function() {
var myDiv = Ext.DomHelper.append(document.body, '<div></div>', true);
var myDialog = new Ext.LayoutDialog(myDiv, {
height : 300,
title : 'Grid - Links',
width : 400,
center: {}
});
//--- init grid BEGIN --------------------------------------------------
var myGridDiv = Ext.DomHelper.append(document.body, {
tag : 'div'
}, true);
var myGridData = [
['Lil', 'DingDing', 'http://www.google.de'],
['Karl', 'Kota', 'http://www.google.fr'],
['Filo', 'Fili', 'http://www.google.co.uk']
];
var myGridStore = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myGridData),
reader: new Ext.data.ArrayReader({}, [
{name: 'first_name'},
{name: 'last_name'},
{name: 'link'}
])
});
myGridStore.load();
var myGridCM = new Ext.grid.ColumnModel([{
dataIndex : 'first_name',
header : 'First Name',
id : 'first_name'
}, {
dataIndex : 'last_name',
header : 'Last Name',
id : 'last_name'
}, {
dataIndex : 'link',
header : 'Link',
id : 'link',
renderer : function(myValue, myDontKnow, myRecord) {
return '<a href="'+myValue+'">'+myValue+'</a>';
}
}]);
var myGrid = new Ext.grid.Grid(myGridDiv, {
autoExpandColumn : 'link',
cm : myGridCM,
ds : myGridStore,
enableDragDrop : true
});
var myGridDZ = new Ext.dd.DropTarget(myGrid.container, {
ddGroup : 'myDDGroup',
notifyDrop : function(myDragSource, myEvent, myData) {
alert('drop into grid');
}
});
myGrid.render();
//--- init grid END ----------------------------------------------------
var myGridPanel = new Ext.GridPanel(myGrid, {
fitToFrame : true
});
var myLayout = myDialog.getLayout();
myLayout.beginUpdate();
myLayout.add('center', myGridPanel);
myLayout.endUpdate();
myDialog.show();
});
</script>
</head>
<body>
</body>
</html>
I hope this will help you ;)
cowabunga!