View Full Version : Copying Ext.tree.plugin.TreeViewDragDrop settings for a Container

28 Jan 2015, 12:43 PM
Hi guys,

Where are the drop event handlers that make Ext.tree.plugin.TreeViewDragDrop configured?

I love how beautifully Ext.tree.plugin.TreeViewDragDrop works on Ext.tree.Panel's. I don't have to configure anything after I "plug" it into my tree panels.

However, I have a situation where I'm using an Ext.container.Container to hold items instead of a tree! I would like to build a similar plugin to that of TreeViewDragDrop but for a container instead of a tree.

I would like to know where the drop event handlers are configured that make TreeViewDragDrop so awesomely smooth and wonderful to use. I'd like to copy those settings.

30 Jan 2015, 7:40 AM
You could always just view the source of Ext.tree.plugin.TreeViewDragDrop (http://docs.sencha.com/extjs/4.2.1/source/TreeViewDragDrop.html#Ext-tree-plugin-TreeViewDragDrop).

onViewRender : function(view) { var me = this,

if (me.enableDrag) {
if (me.containerScroll) {
scrollEl = view.getEl();
me.dragZone = new Ext.tree.ViewDragZone({
view: view,
ddGroup: me.dragGroup || me.ddGroup,
dragText: me.dragText,
displayField: me.displayField,
repairHighlightColor: me.nodeHighlightColor,
repairHighlight: me.nodeHighlightOnRepair,
scrollEl: scrollEl

if (me.enableDrop) {
me.dropZone = new Ext.tree.ViewDropZone({
view: view,
ddGroup: me.dropGroup || me.ddGroup,
allowContainerDrops: me.allowContainerDrops,
appendOnly: me.appendOnly,
allowParentInserts: me.allowParentInserts,
expandDelay: me.expandDelay,
dropHighlightColor: me.nodeHighlightColor,
dropHighlight: me.nodeHighlightOnDrop,
sortOnDrop: me.sortOnDrop,
containerScroll: me.containerScroll


30 Jan 2015, 9:50 AM
Thanks lumberjack! But I already found my own way of doing it and it is beautiful. I'm going to ask my boss if I can share it with you guys. Probably won't be able to though.