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

 

 

 

评论

4 楼 kevin_zhm 2012-05-18  

大哥。不明白。如果是树做导航。能显示表格在右边？还要实现表格是填充了。

3 楼 blueyanghualong 2009-11-24  

2.0下面是可以的 3.0就报错了

2 楼 blueyanghualong 2009-11-23  

在IE下面不显示 只是报ext-all.js缺少对象

1 楼 blueyanghualong 2009-11-23  

哥们你这个demo 怎么托过以后Tree的节点还是存在啊  能不能让他不存在了。