ExtJs Drag and Drop tree to grid
原文地址在这里，英语不太好，还是没看太明白。。点这里代码如下：
dnd_tree_to_grid.js
Ext.onReady(function(){ var myData = { records : [ { name : "Rec 0", column1 : "0", column2 : "0" }, { name : "Rec 1", column1 : "1", column2 : "1" }, { name : "Rec 2", column1 : "2", column2 : "2" }, { name : "Rec 3", column1 : "3", column2 : "3" }, { name : "Rec 4", column1 : "4", column2 : "4" }, { name : "Rec 5", column1 : "5", column2 : "5" }, { name : "Rec 6", column1 : "6", column2 : "6" }, { name : "Rec 7", column1 : "7", column2 : "7" }, { name : "Rec 8", column1 : "8", column2 : "8" }, { name : "Rec 9", column1 : "9", column2 : "9" } ] }; // Generic fields array to use in both store defs. var fields = [ {name: 'name', mapping : 'name'}, {name: 'column1', mapping : 'column1'}, {name: 'column2', mapping : 'column2'} ]; // create the data store var firstGridStore = new Ext.data.JsonStore({ fields : fields, data : myData, root : 'records' }); // Column Model shortcut array var cols = [ { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'}, {header: "column1", width: 50, sortable: true, dataIndex: 'column1'}, {header: "column2", width: 50, sortable: true, dataIndex: 'column2'} ]; // declare the source Grid var firstGrid = new Ext.grid.GridPanel({ ddGroup : 'secondTreeDDGroup', store : firstGridStore, columns : cols, //enableDragDrop : false, stripeRows : true, isTarget : true, autoExpandColumn : 'name', width : 325, region : 'west', title : 'First Grid' }); var root = new Ext.tree.AsyncTreeNode({ text: 'main menu', draggable:false, id:'source' }); var firstTree = new Ext.tree.TreePanel({ autoScroll:true, animate:true, enableDD:true, ddGroup: 'secondTreeDDGroup', containerScroll: true, region : 'center', root: root, loader: new Ext.tree.TreeLoader({ dataUrl:'multisel-data.json' }) }); var blankRecord =Ext.data.Record.create(fields); //Simple 'border layout' panel to house both grids var displayPanel = new Ext.Panel({ width : 650, height : 300, layout : 'border', renderTo : 'panel', items : [ firstGrid, firstTree ] }); var secondGridDropTargetEl = firstGrid.getView().el.dom.childNodes.childNodes var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, { ddGroup : 'secondTreeDDGroup', copy : false, notifyDrop : function(ddSource, e, data){ var record = new blankRecord({ name : ddSource.dragData.node.attributes.text, column1: ddSource.dragData.node.attributes.id, column2: ddSource.dragData.node.attributes.cls }); firstGridStore.add(record); return(true); } }); });
Html
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MultiSelect &amp; ItemSelector</title> <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../extjs/ext-all-debug.js"></script> <script type="text/javascript" src="dnd_tree_to_grid.js"></script></head><body></body><div id="panel"></div> <div id="contactspanel"></div></html>
multisel-data.json
[{ text:'Multiselection Example', id:'0', cls:'master-text', iconCls:'text-folder', children:[{ text:'Abstract rendering in TreeNodeUI', leaf:true, iconCls:'text' },{ text:'Create TreeNodeUI with column knowledge', leaf:true, iconCls:'text' },{ text:'Create TreePanel to render and lock headers', leaf:true, iconCls:'text' },{ text:'Add CSS to make it look fly', leaf:true, iconCls:'text' },{ text:'Test and make sure it works', leaf:true, iconCls:'text' }]}]
http://www.agoit.com/upload/attachment/76551/fcab7c8b-f880-3110-bb88-70311486197d.jpg
页:
[1]