View Full Version : [OPEN] Double-Click Close Button on Desktop Example Window (getStyle of undefined element)

17 May 2011, 9:50 AM
Double-clicking the Close button on the Desktop example's Window causes a repeated error on all tested browsers.

OS: Windows 7 Professional SP1 x64
ExtJS: 4.0 Final Commercial
Google Chrome 11.0.696.68
Firefox 4.0.1
Internet Explorer 9.0.8112.16421
Safari 5.0.5 (7533.21.1)
Opera 11.10

Steps to reproduce:

Goto the Sencha Desktop example at http://dev.sencha.com/deploy/ext-4.0.0/examples/desktop/desktop.html
Click Start > Window 6.
Double-click the Close button. (Note: Only double-clicking causes the error. Single clicking works as expected.)

Errors in each browser: (ext-all-debug.js:8235)
Chrome: Uncaught TypeError: Cannot read property 'style' of undefined
Firefox: el is undefined: out = (v = el.style[prop]) ? v :
IE: SCRIPT5007: Unable to get value of the property 'style': object is null or undefined
Safari: TypeError: Result of expression 'el' [undefined] is not an object.
Opera: Uncaught exception: TypeError: Cannot convert 'el' to object

Fixed by:
Addition at line 8228 of ext-all-debug.js (\src\core\src\dom\Element.style.js:getStyle)

if (el === undefined) {
return null;

8 Jun 2011, 4:00 PM
This bug remains in 4.0.2 RC3.

The fix cannot be applied via Ext.override, as the the framework itself applies an Ext.override. Simplified version of the fix is to change Ext.override(Ext.core.Element.getStyle()) from

if (el == document) {
return null;


if (!el || el == document) {
return null;

8 Jun 2011, 10:31 PM
Thanks for the bug report!

This is fixed in 4.0.2. The problem is the doClose method associated with a desktop window. That method does a fadeOut and the dblclick tries to do a second fadeOut.

14 Jun 2011, 2:16 AM

This isn't really fixed in 4.0.2

Its fixed in the example code! This thread reads as if changes have been made to the actual framework code as apposed to application code.

Plus, the fix isn't entirely correct as it now introduces a new problem. When you double click a window, the window starts to fade then tries to full screen itself.

The code to fix this is as follows.

win.doClose = function () {
win.doClose = Ext.emptyFn; // dblclick can call again...
win.maximize = Ext.emptyFn; // also stop window maximising
win.minimize = Ext.emptyFn; // stop minimize just in case
listeners: {
afteranimate: function () {

NOTE: I just want to stress this is code in the application, meaning if you simply upgrade to 4.0.2 the problem will not be fixed. You need to make the changes to the /js/Desktop.js file around line 330

14 Jun 2011, 1:11 PM
You are correct that this is a fix in the desktop example. This is because the fadeOut effect is added to window close in that example only.

I'm not sure I see how you can get a close and a maximize out of a dblclick. You have to dblclick on the title bar (not the close btn) to get the maximize effect. Where do you have to dblclick to get this result?

15 Jun 2011, 12:58 AM
Just double click the close button

Tested on Safari and Chrome

Plus, I've just noticed another problem... try double clicking the minimize button, the animation effect screws up trying to minimize and maximize LOL

15 Jun 2011, 9:59 PM
I'm not seeing any of these. The dblclick of close attempts to call doClose twice (which is fixed in 4.0.2), but dblclick on minimize of maximize doesn't do anything extra.

Are you on Mac or Windows or other? I am using Windows to test this.

Also, how fast do the animations play for you? Maybe there is a way to catch the button mid-animation and trigger another if the animation is slow enough for some reason.

Lastly, from where are you running the example? I tested my dev build and http://dev.sencha.com/deploy/ext-4.0.2/examples/desktop/desktop.html to be sure.

Does anyone else see this in 4.0.2?

16 Jun 2011, 1:53 AM
I'm testing the same link you provide for the desktop example.

On Ubuntu with Chrome
When I double click the close button, I see the window start to fade, and then the whole desktop flashes for a split second while the window is maximized, then the window disappears.

Double clicking the minimize / maximize buttons work as expected

On Ubuntu with Firefox
Clicking the close button doesn't actually fade the window. All buttons seem to work as intended.

On Mac with Safari
When I double click the close button I see the window start to fade, and then the whole desktop flashes for a split second while the window is maximized, then the window disappears.

Double click the minimize button starts to minimize then shows a permanent transparent box over the bottom half of the screen

On WinXP with IE8
When I double click the close button I see the window start to fade, and then the whole desktop flashes for a split second while the window is maximized, then the window disappears.

Other buttons are fine

If you can't see the weird effects, override the windows maximize method and double click the close button

Ext.override(Ext.window.Window, {
maximize: function(ct) {
console.log("Maximize !!!");

16 Jun 2011, 8:17 PM
Thanks for the info! Even though I don't see the anomalies, I do see the log statement. I will look to see if dblclick can trigger such things outside the desktop example. If so, I will see what we can do to close that loophole in the framework.

17 Jun 2011, 7:50 AM
I've also encountered the errors from the original post when windows within the desktop are being closed programatically, instead of by user clicks. It doesn't happen all the time, but it does occasionally. Once it does, windows can no longer be closed. The windows in question are set to destroy all their components on beforedestroy. This leads me to believe there are some event sequencing issues where components are destroyed before a styling sequence is completed.

The solution from the second post has solved it for me in every version since 4.0 RC2. I'm really not sure why an undefined element is allowed through when a null response could be returned. Or why the framework itself uses overrides, which prevents further overrides.

22 Jun 2011, 1:03 PM
Thanks for the update.

The check for "!el" in Element.getStyle would mask some errors, but basically, calling that method with a null '.dom' property is a logic error in the caller. If you set a breakpoint on that line with the "!el" condition, that might help explain who is doing wrong things with an invalid element and we can trace the problem to its root cause.

That is how I noticed that doClose was called during the fadeOut animation loop initiated previously by doClose. I suspect there is another problem in here somewhere from the sounds of it. Possibly in the framework itself and not unique to the desktop example where the doClose override was applied. That is the override you were questioning, correct?

29 Jun 2011, 5:15 AM
Maybe this fix works for your problem as well:

29 Jun 2011, 7:13 AM
Yes, I see your point about this error leading one to logical errors. This leads me to wonder what else might be breaking because of the root errors. So far, we haven't encountered other issues related to this error after squelching it at this level. We'll revisit it should we have reproducible evidence otherwise.

In the meantime, we did find a way to get past the issue of "overriding a override":

Ext.apply(Ext.core.Element.prototype, {
getStyle: function(){
//copy + paste the original method, apply fix