// 使用一个Json数据结构作为tree的本地数据源 // 参考“http://ccmv.javaeye.com/admin/blogs/154049” var nodes = [ {'text' : 'SY0706', 'id' : 1, 'leaf' : false, 'cls' : 'folder', 'children' : [ {'text' : '1', 'id' : 11, 'leaf' : false, 'cls' : 'folder', 'children' : [ {'text' : '01', 'id' : 111, 'leaf' : true, 'cls' : 'file'}, {'text' : '02', 'id' : 112, 'leaf' : true, 'cls' : 'file'}, {'text' : '03', 'id' : 113, 'leaf' : true, 'cls' : 'file'}, {'text' : '04', 'id' : 114, 'leaf' : true, 'cls' : 'file'}, {'text' : '05', 'id' : 115, 'leaf' : true, 'cls' : 'file'} ]}, {'text' : '2', 'id' : 12, 'leaf' : false, 'cls' : 'folder', 'children' : [ {'text' : '06', 'id' : 121, 'leaf' : true, 'cls' : 'file'}, {'text' : '07', 'id' : 122, 'leaf' : true, 'cls' : 'file'}, {'text' : '08', 'id' : 123, 'leaf' : true, 'cls' : 'file'}, {'text' : '09', 'id' : 124, 'leaf' : true, 'cls' : 'file'}, {'text' : '10', 'id' : 125, 'leaf' : true, 'cls' : 'file'} ]} ]} ]; // 拖拽时需要用到的函数,用来处理添加树结点 /* * TreeNode node : tree上的目标结点 * TreeNode refNode : 目标结点的子结点,用于定位新添加的结点 * Record Array selections : 从grid中选取的记录数组 */ var ddFunction = function(node, refNode, selections) { for(var i = 0; i < selections.length; i ++) { var record = selections[i]; node.insertBefore(new Tree.TreeNode({ text: record.get('text'), id: record.get('id'), leaf: record.get('leaf'), cls: record.get('cls') }), refNode); } } // 建一棵树,并将其设置到tgDD拖动组中 var Tree = Ext.tree; var tree = new Tree.TreePanel({ renderTo: 'tree', animate: true, loader: new Tree.TreeLoader(), lines: true, selModel: new Ext.tree.MultiSelectionModel(), containerScroll: false, autoHeight: true, root: new Tree.AsyncTreeNode({ text: 'BUAA', draggable: false, id: 0, children: nodes, expanded: true }), enableDD: true, ddGroup: "tgDD", listeners: { // 监听beforenodedrop事件,主要就是在这里工作 // 参考“http://www.javaeye.com/topic/155272”中的讨论 beforenodedrop: function(dropEvent) { var node = dropEvent.target; // 目标结点 var data = dropEvent.data; // 拖拽的数据 var point = dropEvent.point; // 拖拽到目标结点的位置 // 如果data.node为空,则不是tree本身的拖拽,而是从grid到tree的拖拽,需要处理 if(!data.node) { switch(point) { case 'append': // 添加时,目标结点为node,子结点设为空 ddFunction(node, null, data.selections); break; case 'above': // 插入到node之上,目标结点为node的parentNode,子结点为node ddFunction(node.parentNode, node, data.selections); break; case 'below': // 插入到node之下,目标结点为node的parentNode,子结点为node的nextSibling ddFunction(node.parentNode, node.nextSibling, data.selections); break; } } } } }); // grid的数据源 var data = [ ['11', 211, true, 'file'], ['12', 212, true, 'file'], ['13', 213, true, 'file'], ['14', 214, true, 'file'], ['15', 215, true, 'file'], ['16', 221, true, 'file'], ['17', 222, true, 'file'], ['18', 223, true, 'file'], ['19', 224, true, 'file'], ['20', 225, true, 'file'] ]; var store = new Ext.data.Store({ reader: new Ext.data.ArrayReader({}, [ {name: 'text'}, {name: 'id'}, {name: 'leaf'}, {name: 'cls'} ]) }); store.loadData(data); // 建一个grid,并设置到tgDD拖拽组中 var Grid = Ext.grid; var model = new Grid.ColumnModel([ {header: "text", width: 50, sortable: true, dataIndex: 'text'}, {id:'id', header: "id", width: 50, sortable: true, dataIndex: 'id'}, {header: "leaf", width: 50, sortable: true, dataIndex: 'leaf'}, {header: "cls", width: 50, sortable: true, dataIndex: 'cls'} ]); var grid = new Grid.GridPanel({ renderTo: 'grid', ds: store, cm: model, sm: new Grid.RowSelectionModel(), autoHeight: true, enableDragDrop: true, ddGroup: "tgDD" });