View Full Version : treeviewdragdrop disable root node drops

7 Mar 2012, 2:28 PM

I'm having a bit of trouble with a treepanel, more directly the problem concerns dragging & dropping nodes. What I want to do is to let the user drag leafs to the folders only. I wish to NOT ALLOW drops to the root folder.

Here's more detail:
My panel starts off with only a hidden root node, it appears blank to the user. The user can add folders to the (hidden) root only. Also, I've configured each folder "allowDrag: false" so they will always remain at a depth of 1.

The user can create leafs inside any folder selected; this results in new leafs at a depth of 2. All good so far. The user can drag and drop the new leafs into any of the stationary folders (previously created); this is exactly what I want.

The problem is that the user can also drag leafs to the same depth where the folders live, at a depth of 1. I want leaf nodes to be constrained to a depth of 2 only.

I'm monkeying around with the treeviewdragdrop view configuration without success. I'm hoping to use the "beforedrop: function()" in the panel's listener configuration to somehow 1.) determine if the leaf drop target is the root node and 2.) stop this before it happens. I just can't seem to get this done...

Extra stuff: The panel's controller is adding folders and leafs successfully so I didn't include that code here.

Here's my code so far:

Ext.define('Nile.view.layout.BillingPlanTree', {
requires: ['Nile.store.BillPlanTreeStore'],

extend: 'Ext.tree.Panel',
alias: 'widget.billplantree',
id: 'BillingPlanTree',
hideHeaders: true,
iconCls: 'iconEventRuleSet',
autoScroll: true,
scroll: 'vertical',
flex: 1,
padding: '5 5 5 5',
useArrows: false,
expanded: true,
rootVisible: false,
store: 'BillPlanTreeStore',
height: 5000, //necessary because adding more nodes isn't making contrainer scrollable

viewConfig: {

plugins: {

ptype: 'treeviewdragdrop',
allowContainerDrop: false,
allowParentInsert: false,
//enableDrop: false, - works but whole tree disabled; can we do rootnode.enabledrop(false)?


listeners: {

/* The TreeView node if any over which the mouse was positioned.
* Returning false to this event signals that the drop gesture was invalid,
* and if the drag proxy will animate back to the point from which the drag began.
* Returning 0 To this event signals that the data transfer operation should not take place,
* but that the gesture was valid, and that the repair operation should not take place.
beforedrop: function(node, data, overModel, dropPosition, dropFunction, eOpts){

// stop leaf node drag to root node





initComponent: function() {

Ext.applyIf(this, {

columns: [{

xtype: 'treecolumn',
text: 'Task',
dataIndex: 'task',
width: 295,


xtype: 'actioncolumn',
dataIndex: 'edit',
width: 20,
items: [{
icon: 'resources/images/icon-trash.png'






8 Mar 2012, 4:26 PM
You can override the isValidDropPoint int he Ext.tree.ViewDropZone class

8 Mar 2012, 4:40 PM
Thanks for the hint!