PDA

View Full Version : D&D from grid to tree?



redge
2 Jun 2007, 5:07 PM
i wanted realize D&D from grid to tree? who can give me some suggestions or an example?:)

jsakalos
2 Jun 2007, 5:22 PM
i wanted realize D&D from grid to tree? who can give me some suggestions or an example?:)

I guess you'll find some examples if you search but what's most important to make it working is to set same ddGroup for both tree and grid.

redge
3 Jun 2007, 5:26 PM
I do not know how to use the GridDragZone? like Organizing Images into Albums? However, I can not achieve success D&D from grid to tree.

GridToTree.js
code:

Example={
init:function(){
// this is a tree
var Tree = Ext.tree;
var tree = new Tree.TreePanel('Tree_div', {
animate:true,
enableDD:true,
containerScroll: true,
ddGroup: "TreeGridDD"
});
var root = new Tree.TreeNode({
text: 'yui-ext',
draggable:false,
id:'source'
});

root.appendChild(
new Tree.TreeNode({text:'room', cls:'album-node'}),
new Tree.TreeNode({text:'bus', cls:'album-node'}),
new Tree.TreeNode({text:'city', cls:'album-node', allowDrag:true}),
new Tree.TreeNode({text:'proe', cls:'album-node', allowDrag:true})
);
tree.setRootNode(root);
tree.render();
root.expand(false,false);
this.tree=tree;

// this is a grid
var myData = [
['grid1'],
['grid2'],
['grid3'],
['grid4'],
['grid5'],
['grid6'],
['grid7'],
['grid8'],
['grid9'],
['grid10']
];
var ds = new Ext.data.Store( {
proxy: new Ext.data.MemoryProxy(myData),
reader : new Ext.data.ArrayReader({},[
{name:'filename'}
])
}
);
ds.load();
var colModel = new Ext.grid.ColumnModel([
{header:"filename",sortable: true, locked:false,width:120,dataIndex:'filename',}
]);

var mySelectionModel= new Ext.grid.RowSelectionModel({singleSelect:false});
var grid = new Ext.grid.Grid("grid_div",{
ds:ds,
cm:colModel,
selModel: mySelectionModel,
ddGroup:"TreeGridDD",
enableDragDrop:true
});
//this is a grid DragDrop
var ddrow = new Ext.dd.DropTarget(grid.container, {
ddGroup : 'TreeGridDD',
copy:false,
notifyDrop : function(dd, e, data){
var sm=grid.getSelectionModel();
var rows=sm.getSelections();
var cindex=dd.getDragData(e).rowIndex;
for(i = 0; i < rows.length; i++) {
rowData=ds.getById(rows[i].id);
if(!this.copy) ds.remove(ds.getById(rows[i].id));
ds.insert(cindex,rowData);
};
}
});
var layout = new Ext.BorderLayout.create({
center : {
margins:{left:3,top:3,right:3,bottom:3},
panels:[new Ext.GridPanel(grid)]
}
},'panel_div');
grid.render();
var dragZone = new Ext.grid.GridDragZone(grid, {containerScroll:true,ddGroup: 'TreeGridDD'});
},
}
Ext.onReady(Example.init,Example,true)

redge
3 Jun 2007, 5:27 PM
GridToTree.html
code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>GridToTree</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="MyTest.js"></script>
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<div id="Tree_div" >
</div>
<br/><br/><br/><br/><br/>
<div id="panel_div" style="width:600px;height:300px;">
<div id="grid_div"></div>
</div>
</body>
</html>


Give me some suggestions? Thank you!