PDA

View Full Version : [SOLVED] DnD and EditorGrid doesn't work???



cowabunga1984
10 Jan 2008, 12:24 AM
Hi all,

I want to enable DnD on a EditorGrid. I tried this:


<!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.EditorGrid(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>If I use a "normal" Grid (Ext.grid.Grid) DnD works. Here the errormessage:


sm.isSelected is not a function
http://localhost/workspace_php/extjs07_editorgrid_dnd/web/js/ext1_1_1/ext-all-debug.js
Line 28804Maybe you know what's the problem?

cowabunga! :D

cowabunga1984
10 Jan 2008, 1:03 AM
Ahhh, I solved the problem by myself. I searched a while and found this post:
http://extjs.com/forum/showthread.php?t=16124&highlight=EditorGrid+enableDragDrop

So, I defined the new sm and it works ;)


<!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.EditorGrid(myGridDiv, {
autoExpandColumn : 'link',
cm : myGridCM,
ds : myGridStore,
enableDragDrop : true,
sm : new Ext.grid.RowSelectionModel()
});

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>

cowabunga! :D