Results 1 to 2 of 2

Thread: Drag and Drop from Grid to Tree and backwards

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User fletchergirl's Avatar
    Join Date
    Mar 2010
    Location
    Germany
    Posts
    17
    Vote Rating
    0
      0  

    Default 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:
    // Stcklisten 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);
    
    
    // Stcklisten 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
            }}
            }
        });
    
    // Stcklisten Container
        var itemPartList = new Ext.Container({
            id: 'itemPartList',
            title: 'Stcklisten',
            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

  2. #2
    Sencha User fletchergirl's Avatar
    Join Date
    Mar 2010
    Location
    Germany
    Posts
    17
    Vote Rating
    0
      0  

    Default

    No one there to help me?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •