PDA

View Full Version : Draggable panel 'jumps' off screen



cflynn07
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:
http://youtu.be/ve6762fXUBo

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(){
console.log('splitbutton');
},
menu: new Ext.menu.Menu({
items: [
{text: 'Item 1', hander: function(){}},
{text: 'Item 2', hander: function(){}},
]
})
}]
}],
listeners: {
render: function(sender){

console.log(sender);

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

getTargetFromEvent: function(e) {

console.log('getTargetFromEvent');

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

console.log(temp);
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){

console.log('onNodeDrop');
data.panel.setPosition(50, 50, true);
return true;

}
});



}
}
});

jay@moduscreate.com
24 Jan 2012, 6:53 AM
is this reproducible on a vanilla page?

cflynn07
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.

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