dojo dijit.Dialog destroy underlay error

问题:

I have a class that extends dijit.Dialog but only to set default functionality and buttons for my site. When clicking the dialog's cancel button the following code is run:

    this.actionDialog.destroyRecursive();
    this.actionDialog.destroy();

nb this.actionDialog = dijit.Dialog

Sometimes (not always) the following error gets thrown:

Uncaught TypeError: Cannot call method 'destroy' of undefined
DialogUnderlay.xd.js:8

Which causes following dialogs to incorrectly display. I am using 1.5 from Google API's. Am I missing something with the underlay code?

Error thrown after Ken's answer:

exception in animation handler for: onEnd
TypeError: Cannot read property 'style' of null

Both from dojo.xd.js:14. But the code still works properly.

回答1:

I'm still not entirely sure what the problem is, other than for some reason dijit.DialogUnderlay code is getting confused. FWIW, this doesn't happen in Dojo 1.6.

While I was poking at some potential solutions, I seemed to accidentally find out that avoiding this problem is perhaps as easy as calling hide() on the dialog immediately before destroying it, e.g.:

this.actionDialog.hide();
this.actionDialog.destroyRecursive();

Alternatively, you might be interested in hiding the dialog, then destroying it once the hide animation finishes.

Here's how you can do it on Dojo 1.5 and earlier (tested 1.3+):

dlg.connect(dlg._fadeOut, 'onEnd', function() {
    this.destroyRecursive();
});
dlg.hide();

In 1.6, the fadeOut animation is no longer exposed on the instance (granted, it was technically private earlier anyway), but onHide now triggers once the animation ends (whereas before it triggered as soon as it began). Unfortunately a setTimeout is needed to get around an error that occurs due to other code in the branch calling onHide, which assumes that something still exists on the instance which won't after we've destroyed it (see #12436).

dlg.connect(dlg, 'onHide', function() {
    setTimeout(function() { dlg.destroyRecursive(); }, 0);
});
dlg.hide();

See it in action on JSFiddle: http://jsfiddle.net/3MNRu/1/ (See the initial version for the original error in the question)

回答2:

The dialog.hide() method returns a Deferred, your code can be something more readable like this:

var dialog = this.actionDialog;
dialog.hide().then(function(){ dialog.destroyRecursive(); });

Be careful not to do this:

this.actionDialog.hide().then(function(){ this.actionDialog.destroyRecursive(); });

At the context of then this has another meaning!

回答3:

You only need to call destroyRecursive()

The second destroy command is what is probably causing the error, and the error probably is causing the issues with other dialogs.

http://dojotoolkit.org/api/1.3/dijit/_Widget/destroyRecursive

destroyRecursive

Destroy this widget and it's descendants. This is the generic "destructor" function that all widget users should call to cleanly discard with a widget. Once a widget is destroyed, it's removed from the manager object.

回答4:

I was getting the IE8 error : 'this.focusNode.form' is null or not an object. I found this was the result of the dialog.hide() returning a deferred. I wrote my own _closeDialog which eliminated the IE error.

_closeDialog : function(cntxt){
        cntxt.popup.hide().then(
        function(){
            cntxt.popup.destroyRecursive(false);
            cntxt.popup.destroy(false);
            cntxt.destroyRecursive(false);
            cntxt.destroy(false);
        });
    },