View Full Version : Dragging window without showing window proxy

15 Nov 2010, 5:39 PM
Currently, when you drag a window around, the window turns blue (using the default themes) and then the blue window proxy moves around the screen until you release the mouse. Then the window is displayed again. What's the easiest way to customize this behavior so that the window is shown while it is being dragged?

For reference, it looks like you can easily override this for Panels.

From the Panel documentation:

new Ext.Panel({
title: 'Drag me',
x: 100,
y: 100,
renderTo: Ext.getBody(),
floating: true,
frame: true,
width: 400,
height: 200,
draggable: {
// Config option of Ext.Panel.DD class.
// It's a floating Panel, so do not show a placeholder proxy in the original position.
insertProxy: false,

// Called for each mousemove event while dragging the DD object.
onDrag : function(e){
// Record the x,y position of the drag proxy so that we can
// position the Panel at end of drag.
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);

// Keep the Shadow aligned if there is one.
var s = this.panel.getEl().shadow;
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());

// Called on the mouseup event.
endDrag : function(e){
this.panel.setPosition(this.x, this.y);

Overriding the draggable config property allows you to do this for Panels. But for Windows, it doesn't look like draggable can take a hash of properties.

Now in the Window documentation, under the public properties, it does say under the "dd" property:

If this Window is configured draggable, this property will contain an instance of Ext.dd.DD which handles dragging the Window's DOM Element.

This has implementations of startDrag, onDrag and endDrag which perform the dragging action. If extra logic is needed at these points, use createInterceptor or createSequence to augment the existing implementations.

Anyone know what the best approach is to customize the Ext.Panel.DD for a Window?