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

We have customers that have applications running 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:

The solution, or rather 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.

Johan van de Merwe
Dedicated to professional software development since 1985. Has worked since 1992 as IT manager in several international operating companies. Since 2007 CEO and Sencha Ext JS web application developer at Enovision GmbH.

Leave a Reply