PDA

View Full Version : Drag and drop in a panel



Zolcsi
21 Feb 2010, 1:35 PM
Hi folks,

I have a border layout with a center and an east region. On the east there is a panel, called PlayGround, here is its definition:



InterPont.Todo.PlayGround = function(config)
{
InterPont.Todo.PlayGround.superclass.constructor.call(this, config);
};

Ext.extend(InterPont.Todo.PlayGround, Ext.Panel, {

addTodo: function()
{
var todo = new InterPont.Todo.Todo({
title: 'TODO',
html: 'Testing, 1.. 2.. 3..'
});
this.add(todo);
this.doLayout();
},

initComponent: function()
{
Ext.apply(this, {
layout: 'absolute',
collapsible: true,
title: 'PlayGround',
width: 300,

tbar: [{
iconCls: 'add',
text: 'Add',
handler: this.addTodo,
scope: this
}]
});
InterPont.Todo.PlayGround.superclass.initComponent.apply(this, arguments);
}
});

I'd like to have small "boxes" in this, which are draggable. These are called Todo-s, and here is the class for them:



InterPont.Todo.Todo = function(config)
{
InterPont.Todo.Todo.superclass.constructor.call(this, config);
};

Ext.extend(InterPont.Todo.Todo, Ext.Panel, {

initComponent: function()
{
Ext.apply(this, {
draggable: {
insertProxy: false,

onDrag: function(e) {
var pel = this.proxy.getEl();
var dragEl = Ext.get(this.getDragEl());
console.debug(dragEl.getLeft(true));
this.x = pel.getLeft(true);
this.y = pel.getTop(true);
},

endDrag: function(e) {
this.panel.setPosition(this.x, this.y);
}
},
width: 150,
height: 80
});
InterPont.Todo.Todo.superclass.initComponent.apply(this, arguments);
}
});


Everything works perfect, except that in the todo objects onDrag method I get the absolute coordinates of the box on the page, instead of the coordinates relative to the top-left corner of my east container (the playground)
I searched a lot for this, but all I found was to use absolute layout, which is the case with me, so I'm really stuck now.