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的某一节点，实现想要的功能。

• ExtJS+ASP.NET实现真实的进度条显示服务器端长时间操作的进度
• ExtJS+ASP.NET实现异步Tree的节点搜索和查找下一个(FindNext)
• ExtJS+ASP.NET实现Tree节点的拖动(DragDrop)
• ExtJS+ASP.NET实现Grid到Tree的拖动(DragDrop)
• ExtJS之ASP.NET服务器端实现ashx和asmx处理客户端请求
• 使用YUI Compressor和DOS批处理脚本压缩JavaScript和CSS
• 优化JavaScript
• 区分JavaScript中的underfined,null和NaN