1. #1
    Ext JS Premium Member
    Join Date
    May 2007
    Location
    Sydney, Australia
    Posts
    178
    Vote Rating
    0
    badgerd is on a distinguished road

      0  

    Question Grid to Tree DnD

    Grid to Tree DnD


    I have a grid and tree defined as below -

    Code:
    navTree = new Tree.TreePanel('el_EmailFolder', { 
            animate:true,  
    		rootVisible: false,
    		lines:false,
            loader: new Tree.TreeLoader({dataUrl:'resources/retrieveEmailFolders.cfm'}), 
    		ddGroup : 'gridTreeDD',
    		enableDrop:true,
            containerScroll: true
        });
    
    .......................
    
    grid = new Ext.grid.Grid('el_emailgrid', {
    	ds: ds,
    	cm: cm,
    	enableDrag:true,
    	ddGroup : 'gridTreeDD',
    	loadMask: {msg: 'Retrieving emails...'}
    });
    I have tried searching for the best possible method to enable dragging a grid row into a tree node and passing the grid row id - what is the best way to achieve this? Does anyone have any code that I can duplicate to make this work?

  2. #2
    Ext JS Premium Member
    Join Date
    May 2007
    Location
    Sydney, Australia
    Posts
    178
    Vote Rating
    0
    badgerd is on a distinguished road

      0  

    Default


    Anyone?

  3. #3
    Ext User
    Join Date
    Dec 2007
    Location
    Maida Vale
    Posts
    96
    Vote Rating
    0
    dearsina is on a distinguished road

      0  

    Default


    Did you ever find a solution? Is there an example I can look at? Can anybody else help?

  4. #4
    Ext User
    Join Date
    Sep 2007
    Posts
    3
    Vote Rating
    0
    edokan is on a distinguished road

      0  

    Default


    Hi,

    after digging forums i found the solution. thanks to jack (as usual).

    set properties of tree
    Code:
            enableDD: true,
            ddGroup: 'myGroup', // this will be our drag and drop group
    set properties of grid
    Code:
            enableDragDrop: true,
            ddGroup: 'myGroup',
    attach to before drop event so, you can convert grid row to tree node
    Code:
        tree.on('beforenodedrop', function(e) {
            var s = e.data.selections, r = [];
            for (var i = 0, len = s.length; i < len; i++) {
                r.push(new Ext.tree.TreeNode({ // build array of TreeNodes to add
                    allowDrop: false,
                    text: s[i].data.name,
                    id: s[i].data.id
                }));
            }
            e.dropNode = r;  // return the new nodes to the Tree DD
            e.cancel = r.length < 1; // cancel if all nodes were duplicates
        });

    that's it. i hope it will help.

  5. #5
    Ext User
    Join Date
    Dec 2008
    Posts
    108
    Vote Rating
    0
    extjs_new is on a distinguished road

      0  

    Default cancel the drop

    cancel the drop


    hi, how would I cancel the drop?
    i have this function:
    PHP Code:
    ,InsertAppendMoveNode:function(eidtext) {    

    var 
    SuccessInsert true;
    //this is the variable I wanted to alter in my callback function


    Ext.Ajax.request({
                                    
    url  'process-request.php',
                                    
    method 'POST',
                                    
    timeout 120000,
                                    
    params : {
                                         
    cmd:'InsertAppendMoveNode',    
                                         
    id:id,
                                         
    point:e.point,
                                         
    target:e.target.id,
                                         
    text:text,                                    
                                         
    treeId:1,
                                         
    treeTable:'tree'                                
                                    
    },
                                    
    success:  function(responserequest){ 
                                       var 
    result=Ext.util.JSON.decode(response.responseText).success;
                                           switch(
    result){
                                              case 
    "true":
                                                
    Ext.MessageBox.alert('Successful','Drag from grid and drop to teepanel is successful');                                                
                                                break;
                                              default:
                                                var 
    errmsg Ext.util.JSON.decode(response.responseText).error;
                                                  if (
    errmsg) {
                                                           
    Ext.Msg.show({
                                                                   
    title:'Error insering new node',
                                                                   
    msgerrmsg,
                                                                   
    buttonsExt.Msg.OK,                      
                                                                   
    iconExt.MessageBox.ERROR 
                                                                   
    });     
        
    //how can I change value of my variable  SuccessInsert which is declared outside EXt.Ajax request function 

                                                        
    SuccessInsert false;                                               
                                                   }
                                                break;
                                           } 
    //switch(result){
                                     
    },
                                    
                                      
    failure: function(response){
                                          var 
    result=response.responseText;
                                          
    Ext.MessageBox.alert('failure',result);     
        
    //how can I change value of my variable  SuccessInsert which is declared outside my EXt.Ajax request function 

                                          
    SuccessInsert false;
                                    },
                                    
    callback:function(options,success,resp){
                                            var 
    result=Ext.decode(resp.responseText);
                                        
                                            if(
    result.success)   
                                            
    //how can I change value of my variable  SuccessInsert which is declared outside my callback function                                   
                                               
    SuccessInsert true;
                                            else
                                              
    SuccessInsert false;
                                            
                                   }

                                   });

    //here it always return SuccessInsert  true
    return SuccessInsert;


    Question: How can I change a value of SuccessInsert in my callback function? Or even in my success or failure function.

    Thanks