How to capure the event after the drag and drop of panel is over?

[pk.hafeez]

var panel = Ext.create('Ext.panel.Panel', {
id: 'panel',
stateful: true,
stateId: 'panelState',
stateEvents: ['collapse', 'expand'],
listeners : { 'close' : Ext.bind(this.onPortletClose, this) },
stateEvents: ['collapse', 'expand'],
getState: function () { return { collapsed: this.collapsed } },
getPosition: function(local) {
var el = this.el,xy;
if (local === true) {
return [el.getLeft(true), el.getTop(true)];
}
xy = this.xy || el.getXY();
if (this.floating && this.floatParent) {
var o = this.floatParent.getTargetEl().getViewRegion();
xy[0] -= o.left; xy[1] -= o.top;
}
xy[2]=this.collapsed; return xy;
},
applyState: function (state) { if (state) { Ext.apply(this, state); } },
saveState: function() {
debugger; var me = this, id, state,pos;
if (me.stateful !== false) {
id = me.getStateId();
if (id) {
state = me.getState();
savePosition();// gets fired three times. i want it only once after drag drop completed
if (me.fireEvent('beforestatesave', me, state) !== false) {
Ext.state.Manager.set(id, state); me.fireEvent('statesave', me, state);
}
}
}
}
height: 100, border: false, style: { zIndex: 100 }, });

[mitchellsimoens]

The draggable config should setup the Ext.util.ComponentDragger which has a dragend event.