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[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 &amp;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'    }]}]

 
 
[img]/upload/attachment/76551/fcab7c8b-f880-3110-bb88-70311486197d.jpg" alt="[/img]