Fix for Ext JS release 3 drag and drop problem with grids in windows

Fix for Ext JS release 3 drag and drop problem with grids in windows

This post shows an easy fix for the Ext JS 3 problem with drag and drop with grids and reopening Ext.Window objects.

We have customers that still have applications based on the Ext JS release 3 framework.

This post will show a solution to a problem with drag and drop with grids win Ext Windows that happens after you destroy and reopen them.

The problem

When opening a Window for the first time everything works fine. But when you close (and don't hide) the window and reopen it again, it will show the following problem.

First time after opening window

Everything is working fine.


After reopening the window

Then it fails as you can see in the image below.


Chrome developer output

In the Google Chrome developer tools it will show the following: image

The fix

By default Ext.Window objects are destroyed (close) when you close them. You can override this by adding the following in the config of your window:

closeAction : 'hide'

The 'hide' means that your object remains in the DOM and all the listeners stay intact. On some forums your see as a solution to this problem to 'hide' the window.

Hiding an Ext.Window leaves the object in the DOM and that is not what you might want.

No need to hide anymore

Thanks to the Sencha forum and Sencha user berniesaurus there is a fix to this problem. Put the following code in the app.js or any other script of your project that is loaded.

It will override the Ext.dd.DragDropMgr.getZIndex function. I have included it in some of my projects and it works like a charm.

Ext.dd.DragDropMgr.getZIndex = function(element) {
    var body = document.body,
      zIndex = -1,
      overTargetEl = element;

    element = Ext.getDom(element);
    while (element !== body) {
        // this fixes the problem
        if(!element) {
            this.\_remove(overTargetEl); // remove the drop target from the manager
        // fix end

        if (!isNaN(z = Number('zIndex')))) {
            zIndex = z;
        element = element.parentNode;
    return zIndex;
No comments yet

your email address will not be published. required fields are marked *

More from same category