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