Threaded View

  1. #1
    Sencha User fletchergirl's Avatar
    Join Date
    Mar 2010
    Location
    Germany
    Posts
    17
    Vote Rating
    0
    fletchergirl is on a distinguished road

      0  

    Default Drag and Drop from Grid to Tree and backwards

    Drag and Drop from Grid to Tree and backwards


    Hi there!

    Since a few days now I try to change Saki's 'Grid to Tree Drag and Drop' to work in both directions. But all I get is an 'almost' working application. I am stuck
    Now it works as far as I can drag an item from grid to tree, within tree, within grid but if i drag it from tree to grid, it doesn't drop. It just shows the green hook.
    I also tried to differ the ddGroup from tree and grid, but then nothing works anymore.
    This is too much for an ExtJs beginner. Can anyone of the good guys help me? PLEASE

    Code:
    // Stücklisten Grid
    stuecklistengrid = Ext.extend(Ext.grid.GridPanel, {
        initComponent:function() {
        var config = {
        store:itemPartStore
        ,columns:[{
        id:'PART_ITE_ID'
        ,header:"PART_ITE_ID"
        ,width:200, sortable:true
        ,dataIndex:'PART_ITE_ID'
        },{
        header:"IS_EDITABLE"
        ,width:100
        ,sortable:true
        ,dataIndex:'IS_EDITABLE'
        },{
        header:"IS_VISIBLE"
        ,width:100
        ,sortable:true
        ,dataIndex:'IS_VISIBLE'
        }]
        ,viewConfig:{forceFit:true}
        }; // eo config object
         
        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));
         
        this.bbar = new Ext.PagingToolbar({
        store:this.store
        ,displayInfo:true
        ,pageSize:10
        });
        // call parent
        stuecklistengrid.superclass.initComponent.apply(this, arguments);
        } // eo function initComponent
         
        ,onRender:function() {
        // call parent
        stuecklistengrid.superclass.onRender.apply(this, arguments);
         
        // load the store
        this.store.load({params:{start:0, limit:10}});
         
        } // eo function onRender
         
        });
        Ext.reg('examplegrid', stuecklistengrid);
    
    
    // Stücklisten Tree
        var CheckTree = new Ext.tree.TreePanel({
            root:{    text:'root', id:'root', expanded:true, children:[{
                    text:'Folder 1'
                    ,qtip:'Rows dropped here will be appended to the folder'
                    ,children:[{
                    text:'Subleaf 1'
                    ,qtip:'Subleaf 1 Quick Tip'
                    ,leaf:true
                    }]
                    },{
                    text:'Folder 2'
                    ,qtip:'Rows dropped here will be appended to the folder'
                    ,children:[{
                    text:'Subleaf 2'
                    ,qtip:'Subleaf 2 Quick Tip'
                    ,leaf:true
                    }]
                    },{
                    text:'Leaf 1'
                    ,qtip:'Leaf 1 Quick Tip'
                    ,leaf:true
                    }]},
            loader:new Ext.tree.TreeLoader({preloadChildren:true}),
            enableDD:true,
            ddGroup:'grid2tree',
            id:'tree',
            region:'east',
            title:'Tree',
            layout:'fit',
            width:300,
            split:true,
            collapsible:true,
            autoScroll:true,
            listeners:{
            // create nodes based on data from grid
            beforenodedrop:{fn:function(e) {
            // e.data.selections is the array of selected records
            if(Ext.isArray(e.data.selections)) {
             
            // reset cancel flag
            e.cancel = false;
             
            // setup dropNode (it can be array of nodes)
            e.dropNode = [];
            var r;
            for(var i = 0; i < e.data.selections.length; i++) {
             
            // get record from selectons
            r = e.data.selections[i];
             
            // create node from record data
            e.dropNode.push(this.loader.createNode({
            text:r.get('PART_ITE_ID')
            ,leaf:true
            ,IS_EDITABLE:r.get('IS_EDITABLE')
            ,IS_VISIBLE:r.get('IS_VISIBLE')
            }));
            }
             
            // we want Ext to complete the drop, thus return true
            return true;
            }
             
            // if we get here the drop is automatically cancelled by Ext
            }}
            }
        });
    
    // Stücklisten Container
        var itemPartList = new Ext.Container({
            id: 'itemPartList',
            title: 'Stücklisten',
            border:false,
            layout:'border',
            items:[CheckTree, {
            xtype:'examplegrid'
            ,id:'SLgrid'
            ,title:'Grid'
            ,region:'center'
            ,layout:'fit'
            ,enableDragDrop:true
            ,ddGroup:'grid2tree'
            ,listeners: {
                afterrender: {
                    fn: function() {
                        // This will make sure we only drop to the view scroller element
                        SLGridDropTargetEl2 = Ext.getCmp('SLgrid').getView().scroller.dom;
                        SLGridDropTarget2 = new Ext.dd.DropTarget(SLGridDropTargetEl2, {
                                ddGroup    : 'grid2tree',
                                notifyDrop : function(ddSource, e, data){
                                        var records =  ddSource.dragData.selections;
                                        Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
                                        Ext.getCmp('SLgrid').store.add(records);
                                        return true
                                }
                        });
                    }
                }
            }
            }]
            });
    stuecklisten.gif
    Last edited by fletchergirl; 10 Oct 2012 at 12:23 AM. Reason: Added image