View Full Version : Configuring Panel Drag with Proxy!

11 Jun 2013, 9:36 AM
I have a Portal Drag and Drop layout configured where I have many buttons in the east(accordion) panel and a tabpanel in the center which is a portalpanel.

Currently, when I click on a button in the accordion panel, I see a configured panel in the center panel..

Is there a way I can drag the button from the accordion to the tabpanel, and after I drag the button, I see the same configured panel in the column which I drag to?

I have tried to use this logic, where I can successfully drag the button, it recognizes if it's a dropzone / not a dropzone....

var initDragZone = function(v) {
//v.dragZone = new Ext.dd.DragZone(v.getEl(), {
v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
getDragData: function(e) {
// .button-draggable == class of the button you want to drag around
var sourceEl;

sourceEl = e.getTarget('.button-draggable');

if(sourceEl) {
d = sourceEl.cloneNode(true);
d.id = Ext.id();
return v.dragData = {
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
ddel: d

onDrag: function(e) {
// Manually fix the default position of Ext-generated proxy element
// Uncomment these line to see the effect
var pel = this.proxy.getEl();
var proxy = Ext.DomQuery.select('*', this.getDragEl());
proxy[2].style.position = '';

getRepairXY: function() {
return this.dragData.repairXY;
But when I drop the panel, it throws an error : "object has no method getProxy()" <-- This is in the line # 113 of PortalDropZone.js.. where it calls : porxy.getProxy().setWidth('auto');

I have also tried to make a "Panel" instead of a button where by I can drag the whole panel to a particular column and it renders.. But here, one problem is, I somehow need a "Proxy" whereby I can drag the panel and after I drop it into a dropzone, it inserts a Proxy?

Thanks :)