View Full Version : Enable/Disable DD dynamically in TreePanel

23 Feb 2010, 8:12 AM
Hello everybody.

I'm performing some tests with the version 3.1.1 because I want to upgrade Ext in my application, but I'm having some problems.
In my application, I need to enable/disable the drag and drop dynamically in a TreePanel.
In 3.1.0 it works perfectly, but in 3.1.1 it doesn't.

I don't know if its a bug...

My code:

id ( someCondition ) {
myTreePanel.enableDD = true;
} else {
myTreePanel.enableDD = false;
}Can somebody help me?

Thank you very much!

23 Feb 2010, 11:05 AM
hi davidbuzatto,

you do know the difference between a config-option and public properties?
enableDD is a config.


are public properties referring to instances of


(look into the api)

they have public methods like lock and unlock.



is worth a try ;)

kind regards,

24 Feb 2010, 3:35 AM
Hi tobiu, fisrt of all, thanks for your reply.

Well, I know the difference, but when I developed that functionality I was a newbie in ExtJS and I thought that I was doing the right thing. The strange thing is that it was working with the config-option... I confess that I needed to read more carefully the documentation :)

Anyway, I tried to work with the drag and drop zones and it worked. I just needed to enableDD when creating the TreePanel.

Thanks again tobiu!



24 Feb 2010, 5:21 AM
you are welcome.

if you don't use the


config in the treePanel, the dd-zones won't get rendered at all, so it is not possible to lock / unlock them afterwards.

kind regards,

23 Apr 2010, 3:38 AM
Please help, I am unable to make it work. Im getting undefined on the render event handler for the

this.dragZoneWhat am I doing wrong?


journal.home.CodeExplorerPanel = Ext.extend(Ext.tree.TreePanel, {

// configurables
// anything what is here can be configured from outside

treeEditor : null,

// {{{
initComponent : function() {

var filter = new Ext.tree.TreeFilter(this);

var treeLoader = new Ext.tree.TreeLoader({
dataUrl : 'home?action=getChildren',
listeners : {
beforeload : function(treeLoader, node) {
this.baseParams.parentId = node.id;
load : function(tree, expandedNode, resp) {
var respObj = Ext.util.JSON.decode(resp.responseText);

var rootNode = new Ext.tree.AsyncTreeNode({
id : 'b-0',
text : 'Root',
expanded : true,
expandable : true

// hard coded config - cannot be changed from outside
var config = {
title : 'Code Explorer',
loader : treeLoader,
root : rootNode,
autoScroll : true,
enableKeyEvents : true,
enableDD : true,
height : 400,
tbar : {
xtype : 'journal.home.CodeExplorerToolbar'

this.on('render', function() {
this.treeEditor = new Ext.tree.TreeEditor(this)

Ext.apply(this, Ext.apply(this.initialConfig, config));
journal.home.CodeExplorerPanel.superclass.initComponent.apply(this, arguments);

// register xtype
Ext.reg('codeexplorerpanel', journal.home.CodeExplorerPanel);

23 Apr 2010, 4:20 AM
moved it to afterrender event.

I admit I only guessed, feel free to suggest what I should have done so I will be on the right direction next time.

11 Aug 2010, 5:45 AM

I am using ExtJs drag drop functionality. I have an EXTJs treepanel with nodes to drag and Extjs tabpanel to drop the nodes. The tree nodes can be dragged within the tree as well.
The nodes in the tree panel can ONLY be dropped onto the particular tab of the tabpanel and NOT on the remaining tabs. So, I want to disable the drag and drop of the nodes on the other tabs. For this, I dynamically enabled and disabled the drag drop, but the problem is it will disable the drag drop for within the tree as well which should not happen.

Reply, if anybody has worked on this.