1. #11
    Ext User brumby007's Avatar
    Join Date
    Dec 2007
    Posts
    150
    Vote Rating
    0
    brumby007 is on a distinguished road

      0  

    Default


    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?
    PHP Code:
    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"width160sortabletruedataIndex'name'},
            {
    header"column1"width50sortabletruedataIndex'column1'},
            {
    header"column2"width50sortabletruedataIndex'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,
            
    containerScrolltrue
            
    region 'center',
            
    rootroot,
            
    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(ddSourceedata){
              
    alert('haha');
          }
          
        });
    }); 
    Attached Images

  2. #12
    Ext User brumby007's Avatar
    Join Date
    Dec 2007
    Posts
    150
    Vote Rating
    0
    brumby007 is on a distinguished road

      0  

    Default


    Well, anyone can help me?

  3. #13
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  4. #14
    Ext User brumby007's Avatar
    Join Date
    Dec 2007
    Posts
    150
    Vote Rating
    0
    brumby007 is on a distinguished road

      0  

    Default


    Thanks,Animal & yefta2004, Thanks for your good ideas. Now, I work it out.
    My Js
    PHP Code:
    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"width160sortabletruedataIndex'name'},
            {
    header"column1"width50sortabletruedataIndex'column1'},
            {
    header"column2"width50sortabletruedataIndex'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',
            
    containerScrolltrue
            
    region 'center',
            
    rootroot,
            
    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(ddSourceedata){
                        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
    PHP Code:
    <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> 

  5. #15
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

  6. #16
    Ext User brumby007's Avatar
    Join Date
    Dec 2007
    Posts
    150
    Vote Rating
    0
    brumby007 is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    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.

  7. #17
    Ext User
    Join Date
    Jul 2008
    Location
    china
    Posts
    2
    Vote Rating
    0
    zzz698912 is on a distinguished road

      0  

    Default


    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);
    }

  8. #18
    Ext User brumby007's Avatar
    Join Date
    Dec 2007
    Posts
    150
    Vote Rating
    0
    brumby007 is on a distinguished road

      0  

    Default


    Well,Thanks for your code.I modified my code :
    PHP Code:
    var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
            
    ddGroup    'secondTreeDDGroup',
            
    copy       false,
            
    notifyDrop : function(ddSourceedata){
                        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(rowIndexrecord);
                            return(
    true);
                        }
                        
            
            }
        }); 
    Thanks Again!

  9. #19
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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...

  10. #20
    Ext User brumby007's Avatar
    Join Date
    Dec 2007
    Posts
    150
    Vote Rating
    0
    brumby007 is on a distinguished road

      0  

    Default


    HaHa,Thanks very much,i still finish it in 'notifyDrop'
    PHP Code:
    notifyDrop : function(ddSourceedata){
                        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(rowIndexrecord);
                            return(
    true);
                        }
                        
            
            }