PDA

View Full Version : DnD - Grid to Tree



cowabunga1984
7 Jan 2008, 4:14 AM
Hi all,

I want to implement DnD between a Grid and a Tree. Dropping Tree-Nodes into the Grid already works but I can't drop Grid-Items into the Tree.

Here my current Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ExtJs - Example</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 : 500,
title : 'DnD Grid - Tree',
width : 800,
west : {
initialSize : 300
},
center: {}
});

//--- init grid BEGIN --------------------------------------------------

var myGridDiv = Ext.DomHelper.append(document.body, {
tag : 'div'
}, true);

var myGridPanel = new Ext.ContentPanel(myGridDiv, {
fitToFrame : true
});

var myGridData = [
['Lil', 'DingDing'],
['Karl', 'Kota'],
['Filo', 'Fili']
];

var myGridStore = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myGridData),
reader: new Ext.data.ArrayReader({}, [
{name: 'first_name'},
{name: 'last_name'}
])
});
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'
}]);

var myGrid = new Ext.grid.Grid(myGridDiv, {
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 ----------------------------------------------------

//--- init tree BEGIN --------------------------------------------------

var myTreeDiv = Ext.DomHelper.append(document.body, {tag: 'div'});

var myTreePanel = new Ext.ContentPanel(myTreeDiv, {
fitToFrame : true
});

var myTree = new Ext.tree.TreePanel(myTreeDiv, {
enableDD : true,
ddGroup : 'myDDGroup',
loader : new Ext.tree.TreeLoader({
dataUrl : 'get_nodes.php'
})
});

var myTreeRoot = new Ext.tree.AsyncTreeNode({
expanded : true,
leaf : false,
text : 'Nodes',
id : '0'
});

myTree.setRootNode(myTreeRoot);
myTree.render();

//--- init tree END ----------------------------------------------------

var myLayout = myDialog.getLayout();
myLayout.beginUpdate();
myLayout.add('west', myGridPanel);
myLayout.add('center', myTreePanel);
myLayout.endUpdate();

myDialog.show();
});
</script>
</head>
<body>
</body>
</html>I hope you can help me ;)

cowabunga