PDA

View Full Version : How to add link in a grid column



pankaj
6 Jan 2008, 10:35 PM
Hi, i have to add two link in two column of a grid, and every click of those link different dialog will be opened. would any please tell me how it can be done?

cowabunga1984
7 Jan 2008, 5:46 AM
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!