1. #1
    Sencha User juanb's Avatar
    Join Date
    Jun 2011
    Location
    usa
    Posts
    42
    Vote Rating
    1
    juanb is on a distinguished road

      0  

    Question Drag & Drop from tree to grid

    Drag & Drop from tree to grid


    Hi there! Could someone give some example of drag & drop from a tree to a grid, i'm instrested in drag from the tree to the grid and the node not be removed from the tree.
    Any help would be appreciated (i've tried some examples but any of them are for extjs4)

    Thanks in advance
    Juan

  2. #2
    Sencha Premium Member Neilcoder's Avatar
    Join Date
    Apr 2011
    Location
    Ireland
    Posts
    264
    Vote Rating
    0
    Neilcoder is on a distinguished road

      0  

    Post


    I'm fairly sure if you look at the new examples for Extjs 4 it should be fairly straight forward to do what you are talking about.

    I found a good thread where Animal poses useful rhetorical questions about establishing dd in general;

    http://www.sencha.com/forum/showthre...-to-Grid/page2

    I'm looking at the possiblity of creating something similar, where the nodes stay in place, but dropping adds the node as a column to the grid.

    Also saki's is worth looking at;

    http://examples.extjs.eu/

  3. #3
    Sencha Premium Member Neilcoder's Avatar
    Join Date
    Apr 2011
    Location
    Ireland
    Posts
    264
    Vote Rating
    0
    Neilcoder is on a distinguished road

      0  

    Post


    Anyway, here's something I was toying with, (but I think I may have found a different way to deliver the same functionality I was looking for so I'm stopping working on this for now). So its an unfinished implementation, with parts of code that don't need to be in there at all (e.g. there's a grid that isn't being used), but by using the Grid to grid from the example section and doctoring it slightly you can drag a tree node on to the grid and it appears as as an empty record. This is NOT A FULL IMPLEMENTATION but I'm posting it here because it might help you or others looking for a starting point for an Extjs4 tree to grid implementation!

    PHP Code:
    /*

    This file is part of Ext JS 4

    Copyright (c) 2011 Sencha Inc

    Contact:  http://www.sencha.com/contact

    GNU General Public License Usage
    This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.

    If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.

    */

    Ext.require([
        
    'Ext.grid.*',
        
    'Ext.data.*',
        
    'Ext.dd.*'
    ]);

    Ext.define('DataObject', {
        
    extend'Ext.data.Model',
        
    fields: ['name''column1''column2']
    });

    Ext.onReady(function(){

        var 
    myData = [
            { 
    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" }
        ];

        
    // create the data store
        
    var firstGridStore Ext.create('Ext.data.Store', {
            
    model'DataObject',
            
    datamyData
        
    });


        
    // Column Model shortcut array
        
    var columns = [
            {
    text"Record Name"flex1sortabletruedataIndex'name'},
            {
    text"column1"width70sortabletruedataIndex'column1'},
            {
    text"column2"width70sortabletruedataIndex'column2'}
        ];

        
    // declare the source Grid
        
    var firstGrid Ext.create('Ext.grid.Panel', {
            
    multiSelecttrue,
            
    viewConfig: {
                
    plugins: {
                    
    ptype'gridviewdragdrop',
                    
    dragGroup'firstGridDDGroup',
                    
    dropGroup'secondGridDDGroup'
                
    },
                
    listeners: {
                    
    drop: function(nodedatadropRecdropPosition) {
                        var 
    dropOn dropRec ' ' dropPosition ' ' dropRec.get('name') : ' on empty view';
                        
    //Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
                    
    }
                }
            },
            
    store            firstGridStore,
            
    columns          columns,
            
    stripeRows       true,
            
    title            'First Grid',
            
    margins          '0 2 0 0'
        
    });

        var 
    secondGridStore Ext.create('Ext.data.Store', {
            
    model'DataObject'
        
    });

        
    // create the destination Grid
        
    var secondGrid Ext.create('Ext.grid.Panel', {
            
    viewConfig: {
                
    plugins: {
                    
    ptype'gridviewdragdrop',
                    
    dragGroup'secondGridDDGroup',
                    
    dropGroup'firstGridDDGroup'
                
    },
                
    listeners: {
                    
    drop: function(nodedatadropRecdropPosition) {
                        var 
    dropOn dropRec ' ' dropPosition ' ' dropRec.get('name') : ' on empty view';
                        
    console.log("Drag from left to right"'Dropped ' data.records[0].get('name') + dropOn);
                    }
                }
            },
            
    store            secondGridStore,
            
    columns          columns,
            
    stripeRows       true,
            
    title            'Second Grid',
            
    margins          '0 0 0 3'
        
    });


        var 
    store Ext.create('Ext.data.TreeStore', {
            
    proxy: {
                
    type'ajax',
                
    url'../js/drag-nodes.json'
            
    },
            
    root: {
                
    text'Ext JS',
                
    id'src',
                
    expandedtrue
            
    },
            
    folderSorttrue,
            
    sorters: [{
                
    property'text',
                
    direction'ASC'
            
    }]
        });

      var 
    tree Ext.create('Ext.tree.Panel', {
          
    id'tree',
          
    storestore,
          
    width250,
          
    height300,
          
    //new to get to work
    //        draggable: {
    //            delegate: 'h1'
    //        },
          
    viewConfig: {
              
    plugins: {
                  
    ptype'treeviewdragdrop',
                    
    dragGroup'firstGridDDGroup',
                    
    dropGroup'secondGridDDGroup',
                  
    appendOnlytrue
              
    }
                ,
                
    listeners: {
                    
    drop: function(nodedatadropRecdropPosition) {
                        var 
    dropOn dropRec ' ' dropPosition ' ' dropRec.get('name') : ' on empty view';
                        
    console.log("Drag from right to left"'Dropped ' data.records[0].get('name') + dropOn);
                    },
                      
    startdrag:function() {
                          
    console.log("start drag");
    //                      var t = Ext.getCmp('target').body.child('div.drop-target');
    //                      if(t) {
    //                          t.applyStyles({'background-color':'#f0f0f0'});
    //                      }
                      
    }
                  ,
    enddrag:function() {
                      
    console.log("end drag");
    //                  var t = Ext.getCmp('target').body.child('div.drop-target');
    //                  if(t) {
    //                      t.applyStyles({'background-color':'white'});
    //                  }
                  
    }
                }
          }
          
    //,renderTo: Ext.getBody()
    //,enableDrag:true
    //,ddGroup:'t2div'
    //      ,listeners:{
    //      startdrag:function() {
    //          console.log("start drag");
    //          var t = Ext.getCmp('target').body.child('div.drop-target');
    //          if(t) {
    //              t.applyStyles({'background-color':'#f0f0f0'});
    //          }
    //      }
    //      ,enddrag:function() {
    //          console.log("end drag");
    //          var t = Ext.getCmp('target').body.child('div.drop-target');
    //          if(t) {
    //              t.applyStyles({'background-color':'white'});
    //          }
    //      }
    //      }
      
    });

        
    //Simple 'border layout' panel to house both grids
        
    var displayPanel Ext.create('Ext.Panel', {
            
    width        650,
            
    height       300,
            
    layout       : {
                
    type'hbox',
                
    align'stretch',
                
    padding5
            
    },
            
    renderTo     'panel',
            
    defaults     : { flex }, //auto stretch
            
    items        : [
                
                
    tree,
                
    secondGrid
            
    ],
            
    dockedItems: {
                
    xtype'toolbar',
                
    dock'bottom',
                
    items: ['->'// Fill
                
    {
                    
    text'Reset both grids',
                    
    handler: function(){
                        
    //refresh source grid
                        
    firstGridStore.loadData(myData);

                        
    //purge destination grid
                        
    secondGridStore.removeAll();
                    }
                }]
            }
        });
    }); 

  4. #4
    Sencha User juanb's Avatar
    Join Date
    Jun 2011
    Location
    usa
    Posts
    42
    Vote Rating
    1
    juanb is on a distinguished road

      0  

    Default


    Neil thanks for taking time to respond, i've already solved this, but with 2 grids and the dd pluging for grids and the copy option for cloning the grids.
    Thanks

  5. #5
    Sencha Premium Member Neilcoder's Avatar
    Join Date
    Apr 2011
    Location
    Ireland
    Posts
    264
    Vote Rating
    0
    Neilcoder is on a distinguished road

      0  

    Default


    Hey Juan, Would be good to see your solution on the thread incase it comes in useful.

  6. #6
    Sencha User juanb's Avatar
    Join Date
    Jun 2011
    Location
    usa
    Posts
    42
    Vote Rating
    1
    juanb is on a distinguished road

      0  

    Default


    Ok! here it goes, it's just the same old grid-to-grid drag and drop example but whith this additions

    to the first grid:
    Code:
    //----set drop features
        viewConfig: {
            copy:true,
            plugins: {
                ptype: 'gridviewdragdrop',
                enableDrop: false,
                ddGroup:'frames'     
            }
        }
    Where "frames" is whatever dd group name you want to use.

    And for the destination grid:

    Code:
    listeners: {
                
            beforedrop: function(node,data,overModel,position,dropFunction,options ){
                    //console.log(node,data,overModel,position,dropFunction,options );
                    var me=this;
                    if(data.copy){
                        //---get the index within the grid
                        var index=node.viewIndex;
                        if (position !== 'before') {
                            index++;
                        } 
                        //---make a copy of the item
                        var itemadd=data.records[0].copy(Ext.id());//---take one item only 
                        this.store.insert(index,itemadd);                
                        //return 0;
                        return false;
                    } else {
                        return 0;
                    }
                }
    This function makes a copy of the item droped.
    I think this could apply to tree too but had no time to test it.

Thread Participants: 1

Tags for this Thread