从ext树拖拽到表格交互的问题

Question

[color=red][b]问题:[/b][/color]

我现在实现树于表格之间的相互拖拽,将树的叶子节点拖拽到左边表格的时候,表格无法获得叶子节点的属性,从而无法实现插入表格的效果

实现类似如下的效果,从左边树将zhangsan zhaoliu,拖动到右边的表格.右边动态生成含有zhangsan zhaoliu的表格,希望各位可以提供类似的动态生成表格方法.谢谢了

附件有效果图

先将相互拖动的源码共享出来,DropTarget方法如何才能传递树叶子的属性,生成表格呢?

[code="java"]

03.grid



<br> Ext.onReady(function(){<br> var cm = new Ext.grid.ColumnModel([<br> {header:&#39;编号&#39;,dataIndex:&#39;id&#39;},<br> {header:&#39;姓名&#39;,dataIndex:&#39;name&#39;},<br> {header:&#39;描述&#39;,dataIndex:&#39;descn&#39;}<br> ]);</p> <pre><code>var data = [ [&#39;1&#39;,&#39;zhangsan&#39;,&#39;descn1&#39;], [&#39;2&#39;,&#39;lisi&#39;,&#39;descn2&#39;], [&#39;3&#39;,&#39;wangwu&#39;,&#39;descn3&#39;], [&#39;4&#39;,&#39;caocao&#39;,&#39;descn4&#39;], [&#39;5&#39;,&#39;liubei&#39;,&#39;descn5&#39;] ]; var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: &#39;id&#39;}, {name: &#39;name&#39;}, {name: &#39;descn&#39;} ]) }); store.load(); var grid = new Ext.grid.GridPanel({ autoHeight: true, renderTo: &#39;grid&#39;, store: store, cm: cm, enableDragDrop: true }); </code></pre> <p>var ddrow = new Ext.dd.DropTarget(grid.view.mainBody, {<br><br> ddGroup : &#39;GridDD&#39;,<br> copy : false,<br> notifyDrop : function(dd, e, data) {<br> var rows = data.selections;<br> var index = dd.getDragData(e).rowIndex;<br> if (typeof(index) == &quot;undefined&quot;) {<br> index = 0;<br> }<br> for(i = 0; i &lt; rows.length; i++) {<br> var rowData = rows[i];<br> if(!this.copy) store.remove(rowData);<br> //store.insert(index, rowData);<br> }<br> } </p> <pre><code>}); var tree = new Ext.tree.TreePanel({ el: &#39;tree&#39;, ddGroup: &#39;GridDD&#39;, enableDD: true, loader: new Ext.tree.TreeLoader({dataUrl: &#39;treeJson.json&#39;}) }); var root = new Ext.tree.AsyncTreeNode({ text: &#39;偶是根&#39; }); tree.setRootNode(root); tree.render(); root.expand(); tree.on(&#39;nodedragover&#39;, function(e) { }); tree.on(&#39;beforenodedrop&#39;, function(e){ }); </code></pre> <p>});<br>

[/code]

treeJson.json

[code="java"]
[{
id: 1,
text: 'xiaoming',
leaf: true
},{
id: 2,
text: 'xiaoxiao',
leaf:true,

},{
id: 4,
text: 'xiaolan',
leaf: true
}
]

[/code]
[b]问题补充：[/b]
var ddrow = new Ext.dd.DropTarget(grid.view.mainBody, {

ddGroup : 'GridDD',

copy : false,

notifyDrop : function(dd, e, data) {

}

}

}); 

现在的问题就是这个DropTarget方法,怎么获得拖拽到表格中树的节点,

那反过来树怎么获得表格的叶子节点呢,从而实现树的叶子与表格相互拖拽

Answer 1

[size=xx-large][color=red]//搞好了，你试试看，我这里调试通过了[/color][/size]Ext.onReady(function(){
var sm=new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([sm,

{header:'编号',dataIndex:'id'},

{header:'姓名',dataIndex:'name'},

{header:'描述',dataIndex:'descn'}

]);

var data = [   
    ['1','zhangsan','descn1'],   
    ['2','lisi','descn2'],   
    ['3','wangwu','descn3'],   
    ['4','caocao','descn4'],   
    ['5','liubei','descn5']   
];   

var store = new Ext.data.Store({   
    proxy: new Ext.data.MemoryProxy(data),   
    reader: new Ext.data.ArrayReader({}, [   
        {name: 'id'},   
        {name: 'name'},   
        {name: 'descn'}   
    ])   
});   
store.load();   

var grid = new Ext.grid.GridPanel({
    ddGroup:'TreeDD',
    id:'gridId',   
    autoHeight: true,   
    renderTo:'grid',   
    store:store,   
    cm:cm,
    sm:sm,
    enableDragDrop:true
});
if(sm.hasSelection()==false){
    sm.selectFirstRow();
}
var seleRecord=sm.getSelected().copy();
sm.clearSelections();
var seleNode;
var tree = new Ext.tree.TreePanel({
    el:'tree',
    ddGroup:'TreeDD',   
    enableDD:true,
    selModel: new Ext.tree.DefaultSelectionModel({ 
        listeners: { 
            selectionchange:function(selectionModel, node){ 
               seleNode=node;
            } 
        } 
    }), 
    loader: new Ext.tree.TreeLoader({dataUrl:'Tree.json'})   
});   
var root = new Ext.tree.AsyncTreeNode({   
    text: '偶是根'  
});   
tree.setRootNode(root);   
tree.render();   
root.expand();   
var dragNode;
new Ext.dd.DropTarget(tree.container,{   
    ddGroup:'TreeDD',   
    notifyDrop:function(dd,e,data){
        if(typeof data.selections!='undefined'){
            var persons=data.selections;
            for(var i=0;i<persons.length;i++){
                if(!this.copy){
                    var treeNode=new Ext.tree.TreeNode({
                        id:persons[i].get('id'),
                        text:persons[i].get('name'),
                        leaf:true
                    });
                    root.appendChild(treeNode);
                    store.remove(persons[i]);
                }
            }
        }else{
            var r=seleRecord;//
            r.data['id']=seleNode.id;
            r.data['name']=seleNode.text;
            r.data['descn']=seleNode.text;
            grid.stopEditing();
            store.insert(0, r);
            store.commitChanges();
            grid.getView().refresh();
            root.removeChild(seleNode);
        }
    }   
});

});