View Full Version : Draggable panel 'jumps' off screen

23 Jan 2012, 7:31 PM
I'm trying to implement a draggable panel within another panel. I've set up the parent panel to be a dropzone, and i've set the child panel to have the property "draggable: true".

This is a quick video of the behavior I took:

In my handler for "onNodeDrop" I have the panel automatically reposition itself at 50x50 so I can access it again to demo this behavior.

This is my code:

Ext.define('CS.view.ViewDashboard', { extend: 'Ext.panel.Panel',
alias: 'widget.dashboard',
layout: 'fit',
items: [{
xtype: 'panel',
id: 'test_panel',
title: 'test panel',
html: 'test panel',
draggable: true,
constrain: true,
border: true,
width: 300,
height: 300
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
layout: 'hbox',
pack: 'center',
items: [{
xtype: 'splitbutton',
text: 'Applications',
handler: function(){
menu: new Ext.menu.Menu({
items: [
{text: 'Item 1', hander: function(){}},
{text: 'Item 2', hander: function(){}},
listeners: {
render: function(sender){


sender.dropZone = new Ext.dd.DropZone(sender.body, {

getTargetFromEvent: function(e) {


var temp = {
x: e.getX() - this.DDMInstance.deltaX,
y: e.getY() - this.DDMInstance.deltaY

return temp;


// On entry into a target node, highlight that node.
onNodeEnter : function(target, dd, e, data){
// Ext.fly(target).addCls('my-row-highlight-class');

// On exit from a target node, unhighlight that node.
onNodeOut : function(target, dd, e, data){
// Ext.fly(target).removeCls('my-row-highlight-class');

onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;

onNodeDrop : function(target, dd, e, data){

data.panel.setPosition(50, 50, true);
return true;



24 Jan 2012, 6:53 AM
is this reproducible on a vanilla page?

24 Jan 2012, 9:37 PM
The application consists of a viewport and two panels. One parent, the child draggable. The parent panel is the dropzone and the child has the "draggable:true" property.

3 Apr 2012, 12:33 PM
@cflynn07 did you find the solution, I'm facing the same problem.