Looking for demo: Drag and Drop from Tree to Grid?

[brumby007]

Well,Thanks for good idea,i try to create a dropzone,but the notifyDrop dosen't work(it don't alert me "haha"). Anything i did is wrong?

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,
        containerScroll: true, 
        region : 'center',
        root: root,
        loader: new Ext.tree.TreeLoader({
            dataUrl:'http://192.168.2.97:8087/docs/menuData.json'
        })
    });

    
    //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 myzone = new Ext.dd.DropZone("panel", {
      containerScroll:true,
      ddGroup: 'secondTreeDDGroup',
      notifyDrop : function(ddSource, e, data){
          alert('haha');
      }
      
    });
}); 

[brumby007]

Well, anyone can help me?

[Animal]

In DropZone, you have to implement getTargetFromEvent which examines the mouseover event it is pased, and decides what the mouse is over.

This method can set up an object which the other methods of dropZone, onNodeEnter, onNodeOver, onNodeOut and onNodeDrop are passed as their first parameter.

So you can test the target of the event to find the row, test the X,Y of teh event to see whether you want to insert above or below the row, and wrap all this info up in the returned object.

Then those 4 methods which you supply have the information they need to do what they have to do.

[brumby007]

Thanks,Animal & yefta2004, Thanks for your good ideas. Now, I work it out.
My 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:'http://192.168.2.97:8087/docs/menuData.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);
        
        }
    }); 

}); 

My Html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />    
        <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../ext-all.js"></script>
        <script type="text/javascript" src="dnd_tree_to_grid.js"></script>
    </head>    
    <body>
        <div id="panel"></div>    
        <div id="contactspanel"></div>
    </body>
</html> 

[Animal]

Well done. The next step is to insert it at the mouse position.

[brumby007]

Well done. The next step is to insert it at the mouse position.

Can you give me some clue? I have no idea to make it now.

[zzz698912]

this is mycode

// dragdrop in grid
var gridView = mygrid.getView();
var ddrow = new Ext.dd.DropTarget(gridView.mainBody, {
ddGroup : 'dd',
copy : false,
notifyDrop : function(dd, e, dataTree) {
if('tree' in dd){
//dd is treeGragZone
//var rowNum = mygrid.getStore().getCount();
var dataTreeNode = dataTree.node;
var targetEl = e.getTarget();//the mouse position
var rowIndex = gridView.findRowIndex(targetEl);//why I cann't find findRowIndex() in API?
editGrid(dataTreeNode,rowIndex);
dd.proxy.hide();//hidden the div
}

else if('grid' in dd){
//dd is GridDragZone
var sm = mygrid.getSelectionModel();
var rows = sm.getSelections();

var cindex = dd.getDragData(e).rowIndex;
if (cindex == undefined || cindex < 0){
e.cancel=true;
return;
}
for (i = 0; i < rows.length; i++) {
rowData = ds.getById(rows[i].id);
if (!this.copy) {
ds.remove(ds.getById(rows[i].id));
ds.insert(cindex, rowData);
}
}
sm.selectRecords(rows);
}
}
});


//insert function
function editGrid(dataTreeNode,rowIndex){
var p = new Plant({
idUser: 20448,
idPortlet: 1,
idObject: dataTreeNode.id,
nameObject: dataTreeNode.text,
rowspan: 1,
colspan:1,
newline:1,
align:1,
width:1
});
mygrid.stopEditing();
ds.insert(rowIndex, p);
mygrid.startEditing(0, 0);
}

[brumby007]

Well,Thanks for your code.I modified my code :

var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
        ddGroup    : 'secondTreeDDGroup',
        copy       : false,
        notifyDrop : function(ddSource, e, data){
                    var foundItem = firstGridStore.find('name', ddSource.dragData.node.attributes.text);
                    if (foundItem  == -1) {
                        var targetEl = e.getTarget();
                        var rowIndex = firstGrid.getView().findRowIndex(targetEl);
                        var record = new blankRecord({
                            name     : ddSource.dragData.node.attributes.text,
                            column1  : ddSource.dragData.node.attributes.id,
                            column2  : ddSource.dragData.node.attributes.cls
                        });
                        firstGridStore.insert(rowIndex, record);
                        return(true);
                    }
                    
        
        }
    }); 

Thanks Again!

[Animal]

OK, now you have to test whether the mouse's Y position (e.getPageY()) is above the middle line of the targetEl (targetEl.getY() + (targetEl.getHeight() / 2)) or below, and insert at either rowIndex, or rowIndex+1.

You could do this in the notifyOver method, and add a visual indicator at the point at which the new row would be inserted...

[brumby007]

HaHa,Thanks very much,i still finish it in 'notifyDrop'

notifyDrop : function(ddSource, e, data){
                    var foundItem = firstGridStore.find('name', ddSource.dragData.node.attributes.text);
                    if (foundItem  == -1) {
                        var targetEl = e.getTarget();
                        var mouseY = e.getPageY();
                        var rowIndex = firstGrid.getView().findRowIndex(targetEl);
                        var targetY = Ext.get(targetEl).getY() + (Ext.get(targetEl).getHeight()/2);
                        //alert("targetY=" + targetY + "mouseY=" + mouseY)
                        if(targetY < mouseY){
                            rowIndex ++;
                        }
                        
                        var record = new blankRecord({
                            name     : ddSource.dragData.node.attributes.text,
                            column1  : ddSource.dragData.node.attributes.id,
                            column2  : ddSource.dragData.node.attributes.cls
                        });
                        firstGridStore.insert(rowIndex, record);
                        return(true);
                    }
                    
        
        }