ExtJs Drag and Drop tree to grid

three_uncle

原文地址在这里，英语不太好，还是没看太明白。。点这里
 
代码如下：
 
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[0].childNodes[1]      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 & 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'    }]}]