[CLOSED] Enable Drag & Drop dynamically in a treepanel

  1. #1

    [CLOSED] Enable Drag & Drop dynamically in a treepanel

    Hello:

    How can I enable/disable the drag & drop in a tree dynamically?

    Basically, I don't users to accidentally drag nodes because it's very easy to do it, and I want them to enable the drag & drop manually before being able to drag&drop.

    I tried setting different properties on the TreeViewDragDrop and calling enable/disable on the plug-in but they don't have any effect. Also there seems to be no way to add or remove a plug-in dynamically, and by looking at the source code for the TreeViewDragDrop it wouldn't probably work.

    In Ext.Net 1.x I used an extension of the TreePanel that allowed me enable it or disable it dynamically:

    Ext.override(Ext.tree.TreePanel, {
      allowDrag: function (allow) {
        if (allow) {
          if (this.enableDD || this.enableDrag) {
            this.dragZone = new Ext.tree.TreeDragZone(this, this.dragConfig || { ddGroup: this.ddGroup || "TreeDD", scroll: this.ddScroll });
          }
        } else if (this.dragZone) {
          this.dragZone.unreg(); // Unregister the dragZone so Dragging is disabled.
        }
      },
    
      allowDrop: function (allow) {
        if (allow) {
          if (this.enableDD || this.enableDrop) {
    
            this.dropZone = new Ext.tree.TreeDropZone(this, this.dropConfig || {
              ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true
            });
          }
        } else if (this.dropZone) {
          this.dropZone.unreg(); // Unregister the dropZone so Dropping is disabled.
        }
      }
    });
    I think I will end up extending the TreeViewDragDrop plug-in to turn on or off dynamically the ability to drag & drop.

    Thanks
    Last edited by Daniil; Dec 18, 2012 at 5:34 AM. Reason: [CLOSED]
  2. #2
    ok, I did this:

    DynamicTreeViewDragDrop.cs:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Ext.Net;
    
    namespace Utilities.ExtNet
    {
      public class DynamicTreeViewDragDrop: TreeViewDragDrop
      {
        public override string PType
        {
          get { return "dynamictreeviewdragdrop"; }
        }
    
        public override string InstanceOf
        {
          get { return "Ext.tree.plugin.DynamicTreeViewDragDrop"; }
        }
      }
    }

    where:

    DynamicTreeViewDragDrop.js:

    Ext.define('Ext.tree.plugin.DynamicTreeViewDragDrop', {
      extend: 'Ext.tree.plugin.TreeViewDragDrop',
      alias: 'plugin.dynamictreeviewdragdrop',
    
      uses: [
        'Ext.tree.ViewDragZone',
        'Ext.tree.ViewDropZone'
      ],
    
      _view: null,
    
      init : function(view) {
        this.callParent([view]);
        this._view = view;
      },
    
    
    
      allowDrag: function (allow)
      {
        var me = this;
    
        if (allow)
        {
            me.dragZone = new Ext.tree.ViewDragZone({
                                                      view: me._view,
                                                      ddGroup: me.dragGroup || me.ddGroup,
                                                      dragText: me.dragText,
                                                      repairHighlightColor: me.nodeHighlightColor,
                                                      repairHighlight: me.nodeHighlightOnRepair
                                                    });
        }
        else if (me.dragZone)
        {
          me.dragZone.unreg(); // Unregister the dragZone so Dragging is disabled.
    //      Ext.destroy(this.dragZone);
          me.dragZone = null;
        }
    
        me.enableDrag = allow;
      },
    
      allowDrop: function (allow)
      {
        var me = this;
    
        if (allow)
        {
            me.dropZone = new Ext.tree.ViewDropZone({
                                                      view: me._view,
                                                      ddGroup: me.dropGroup || me.ddGroup,
                                                      allowContainerDrops: me.allowContainerDrops,
                                                      appendOnly: me.appendOnly,
                                                      allowParentInserts: me.allowParentInserts,
                                                      expandDelay: me.expandDelay,
                                                      dropHighlightColor: me.nodeHighlightColor,
                                                      dropHighlight: me.nodeHighlightOnDrop
                                                    });
        }
        else if (me.dropZone)
        {
          this.dropZone.unreg(); // Unregister the dropZone so Dropping is disabled.
    //      Ext.destroy(this.dropZone);
          this.dropZone = null;
        }
        me.enableDrop = allow;
      }
     });
    setting the TreePanel View in code (cs):
    .View(new TreeView
              {
                Plugins =
                  {
                    new DynamicTreeViewDragDrop
                    {
                      EnableDrag = true,
                      EnableDrop = true,
                      AllowLeafDrop = true
                    }
                  },
                 
              })
    I can now dynamically call in JavaScript:
        treePanel.getView().plugins[0].allowDrag(enable);
        treePanel.getView().plugins[0].allowDrop(enable);
    The only downside to this is that, when I disabled the drag & drop I can still drag a node however the no-drop allowed icon is permanently on. Using Ext.destroy instead of unreg leads to errors. Any suggestions for getting rid of the no-drop icon as well after disabling the drag&drop?

    Thanks
  3. #3
    Hello!

    Great job and thank you for sharing!
  4. #4
    Do you have any suggestions for getting rid of the no-drop icon that still shows up after disabling the drag&drop?
  5. #5
    Try to use the following script. I just have added calling of the lock method and also I've uncommented destroy event and I haven't seen any errors:

    Ext.define('Ext.tree.plugin.DynamicTreeViewDragDrop', {
    	extend: 'Ext.tree.plugin.TreeViewDragDrop',
    	alias: 'plugin.dynamictreeviewdragdrop',
    
    	uses: [
    	'Ext.tree.ViewDragZone',
    	'Ext.tree.ViewDropZone'
      ],
    
    	_view: null,
    
    	init: function (view) {
    		this.callParent([view]);
    		this._view = view;
    	},
    
    
    
    	allowDrag: function (allow) {
    		var me = this;
    
    		if (allow) {
    			me.dragZone = new Ext.tree.ViewDragZone({
    				view: me._view,
    				ddGroup: me.dragGroup || me.ddGroup,
    				dragText: me.dragText,
    				repairHighlightColor: me.nodeHighlightColor,
    				repairHighlight: me.nodeHighlightOnRepair
    			});
    		}
    		else if (me.dragZone) {
    			me.dragZone.lock();
    			me.dragZone.unreg(); // Unregister the dragZone so Dragging is disabled.
    			Ext.destroy(this.dragZone);
    			me.dragZone = null;
    		}
    
    		me.enableDrag = allow;
    	},
    
    	allowDrop: function (allow) {
    		var me = this;
    
    		if (allow) {
    			me.dropZone = new Ext.tree.ViewDropZone({
    				view: me._view,
    				ddGroup: me.dropGroup || me.ddGroup,
    				allowContainerDrops: me.allowContainerDrops,
    				appendOnly: me.appendOnly,
    				allowParentInserts: me.allowParentInserts,
    				expandDelay: me.expandDelay,
    				dropHighlightColor: me.nodeHighlightColor,
    				dropHighlight: me.nodeHighlightOnDrop
    			});
    		}
    		else if (me.dropZone) {
    			me.dropZone.lock();
    			this.dropZone.unreg(); // Unregister the dropZone so Dropping is disabled.
    			Ext.destroy(this.dropZone);
    			this.dropZone = null;
    		}
    		me.enableDrop = allow;
    	}
    });
  6. #6
    Hi all,

    I think calling the lock and unlock methods should be enough to enable/disable dragging and dropping.
    <ext:TreeViewDragDrop runat="server" PluginId="dragdrop" />
    var p = App.TreePanel1.getView().getPlugin("dragdrop");
    
    p.dropZone.lock(); // and the unlock method to unlock
    p.dragZone.lock(); // and the unlock method to unlock
    See also
    http://docs.sencha.com/ext-js/4-1/#!...op-method-lock
    http://docs.sencha.com/ext-js/4-1/#!...-method-unlock

Similar Threads

  1. [CLOSED] drag and drop in tree panels question
    By bogc in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 31, 2011, 7:43 PM
  2. Replies: 13
    Last Post: Jul 14, 2011, 1:45 PM
  3. Replies: 0
    Last Post: Aug 10, 2010, 5:27 AM
  4. Drag'n Drop
    By Yannis in forum 1.x Help
    Replies: 1
    Last Post: Oct 28, 2009, 6:14 PM
  5. [CLOSED] MultiSelect with drag and drop, Drop listener
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 30, 2009, 8:25 AM

Posting Permissions