ExtJS+ASP.NET实现Grid到Tree的拖动(DragDrop)
摘要：本文介绍使用ExtJS和Asp.NET实现GridPanel到TreePanel的拖动（Drag&Drop）。例如，在Grid中多选任意行（使用CheckBox列），然后拖动到TreePanel的某一节点，实现想要的功能。
ExtJS+ASP.NET实现Grid到Tree的拖动(DragDrop)。
首先打开GridPanel的允许Drag的选项：
1: var grid = new Ext.grid.GridPanel({
2:
3: … //此处省略
4:
5: enableDrag: true, //允许Drag
6:
7: … //此处省略
8:
9: })
打开TreePanel的允许Drop的选项：
1: var tree = new Ext.tree.TreePanel({
2:
3: … //此处省略
4:
5: enableDrop: true, //允许Drop //enableDD:true, //允许Drag & Drop
6:
7: dropConfig:{
8: ddGroup: 'GridDD',// 从Grid到Tree。如果是Tree内部节点拖动，使用'TreeDD'
9:
10: dropAllowed: true,
11: notifyDrop: function(source, e, data) {
12: if(this.lastOverNode.node.id == 'root' || data.selections.length == 0)return;
13:
14: alert(this.lastOverNode.node.id ); //目标节点id
15:
16: var srcList = new Array();
17: for (i = 0; i < data.selections.length; i++) {
18: srcList [i] = data.selections[i].data['mydataField'];
19: }
20:
21: alert(srcList.length); //data: 来自Grid的数据
22:
23: //TODO: 此处增加您想要的操作!
24:
25: this.cancelExpand();
26: this.removeDropIndicators(this.lastOverNode);
27: return true;
28: }, onNodeOver : function(n, dd, e, data){
29: var pt = this.getDropPoint(e, n, dd);
30: var node = n.node;
31: // auto node expand check
32: if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
33: this.queueExpand(node);
34: }else if(pt != "append"){
35: this.cancelExpand();
36: }
37: // set the insert point style on the target node
38: var returnCls = this.dropNotAllowed;
39: if(this.isValidDropPoint(n, pt, dd, e, data)){
40: if(pt){
41: var el = n.ddel;
42: var cls;
43: returnCls = "x-tree-drop-ok-append";
44: cls = "x-tree-drag-append";
45: if(this.lastInsertClass != cls){
46: Ext.fly(el).replaceClass(this.lastInsertClass, cls);
47: this.lastInsertClass = cls;
48: }
49: }
50: }
51: return returnCls;
52: }
53: },
54:
55: …//此处省略
56:
57: })
58:
这样就可以实现在Grid中多选任意行（使用CheckBox列），然后拖动到TreePanel的某一节点，实现想要的功能。
