PDA

View Full Version : Help, about component drag drop



husniadil
1 Dec 2009, 11:35 AM
Hi all..

I'm learning drag drop for extjs component. I've some problems. I hope you would help me :)

http://mashusni.co.cc/files/extjs-dd/dd.jpg

I built 2 panels,
1. DragSourcePanel, contains components that can be dragged.
2. DropTargetPanel, the drop target for draggable components in DragSourcePanel

My questions are:

1. I see animation after mouseup, the dragged component that follow mouse movement is back to it's original location. How can I remove the animation after "endDrag" executed?

2. How about dragging and sorting on the components in the panel? I want make the components on DropTargetPanel could be sorted with dragging.


thanks for the help :)


husni.adil





preview:
http://mashusni.co.cc/files/extjs-dd/

code:


// husni - hello world - drag drop test

Ext.ns('husni');

Ext.onReady(function() {

husni.DragSourcePanel = new Ext.Panel({
renderTo: Ext.getBody(),
title: 'Drag Source Panel',
floating: true,
shadow: false,
x: 250,
y: 100,
frame: true,
width: 200,
items: [new Ext.form.TextField(),new Ext.form.TextArea()],
defaults: {
style: 'margin-bottom: 5px'
}
});

husni.DropTargetPanel = new Ext.Panel({
renderTo: Ext.getBody(),
title: 'Drop Target Panel',
floating: true,
shadow: false,
frame: true,
x: 500,
y: 100,
width: 300,
height: 200,
layout: 'form',
autoScroll: true,
defaults: {
anchor: '90%',
fieldLabel: 'New Field'
},
listeners: {
afterlayout: function(x) {
var fields = x.findByType('field');
Ext.each(fields, function (field) {
var ddsource = new Ext.dd.DragSource(field.getId(), {
ddGroup: 'group2',
afterDragDrop: function(e,id) {
var oid = field.getId();
var o = Ext.getCmp(oid);
Ext.get(oid).parent().parent().remove();
x.remove(o,true);
x.doLayout();
},
getDragData: function() {
return field;
}
});
ddsource = null;
});
}
}
});

var fields = husni.DragSourcePanel.findByType('field');
Ext.each(fields, function (field) {
var ddsource = new Ext.dd.DragSource(field.getId(), {
ddGroup: 'group1',
afterDragDrop: function(e,id) {
var o = null;
switch(field.getXType()) {
case 'textfield':
o = new Ext.form.TextField();
break;
case 'textarea':
o = new Ext.form.TextArea();
break;
}
husni.DropTargetPanel.add(o);
husni.DropTargetPanel.doLayout();
},
getDragData: function() {
return field;
}
});
ddsource = null;
});

var ddtarget = new Ext.dd.DropTarget(husni.DragSourcePanel.getId(), {
ddGroup: 'group2'
});

ddtarget = new Ext.dd.DropTarget(husni.DropTargetPanel.getId(), {
ddGroup: 'group1'
});

ddtarget = null;

});

15 Dec 2009, 8:19 AM
to sort, you will need a custom method that somehow sorts the child items based on some key and then call add/remove/etc internally.

15 Dec 2009, 8:33 AM
if the drop is successful, you can end the drop by the following override method:



endDrag : function() {
var dragProxy = Ext.get(this.getDragEl());
dragProxy.hide();
}