1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    172
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default toggle enableDrop using gridviewdragdrop

    toggle enableDrop using gridviewdragdrop


    Is it possible to toggle enableDrop using the gridviewdragdrop plugin or disable and enable it. I want to only allow drag and drop on the grid if a condition is true. I've set enableDrop to false initially and I want to enable it when a selection in a second grid is made.

    I tried

    Code:
    Ext.getCmp('myGrid).enableDrop = true;
    but that doesn't do anything.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    There is a disable and enable that locks and unlocks the dragzone and dropzone on the plugin.

    Using the grid to grid drag and drop example from the downloaded examples, I have edited the displayPanel and added a couple buttons to the bottom docked toolbar to enable/disable the drag/drop on the 2nd grid and works like a charm. When I press the disable button, it will not allow any dragging from or dropping to the right grid. If I press the enable button, it will then allow both dragging and dropping on the second grid. Edits to the example are in red (the entire example is not here):

    Code:
        // create the destination Grid
        var secondGrid = Ext.create('Ext.grid.Panel', {
            viewConfig: {
                plugins: {
                    ptype: 'gridviewdragdrop',
                    pluginId: 'gridviewdragdrop',
                    dragGroup: 'secondGridDDGroup',
                    dropGroup: 'firstGridDDGroup'
                },
                listeners: {
                    drop: function(node, data, dropRec, dropPosition) {
                        var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                        Ext.example.msg("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'
        });
    
        //Simple 'border layout' panel to house both grids
        var displayPanel = Ext.create('Ext.Panel', {
            width        : 650,
            height       : 300,
            layout       : {
                type: 'hbox',
                align: 'stretch',
                padding: 5
            },
            renderTo     : 'panel',
            defaults     : { flex : 1 }, //auto stretch
            items        : [
                firstGrid,
                secondGrid
            ],
            dockedItems: {
                xtype: 'toolbar',
                dock: 'bottom',
                items: ['->', // Fill
                {
                    text    : 'Disable',
                    handler : function() {
                        var view   = secondGrid.getView(),
                            plugin = view.getPlugin('gridviewdragdrop');
                            
                        plugin.disable();
                    }
                },
                {
                    text : 'Enable',
                    handler : function() {
                        var view   = secondGrid.getView(),
                            plugin = view.getPlugin('gridviewdragdrop');
                            
                        plugin.enable();
                    }
                },
                {
                    text: 'Reset both grids',
                    handler: function(){
                        //refresh source grid
                        firstGridStore.loadData(myData);
    
                        //purge destination grid
                        secondGridStore.removeAll();
                    }
                }]
            }
        });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    May 2010
    Posts
    172
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default


    Thanks Mitchell for the reply! I didn't know about the getPlugin function, thats exactly what I needed. I really appreciate all the great help you give on here. This is not the first time you've helped me when I was stuck.

Thread Participants: 1

Tags for this Thread