Dojo Exception on hiding a dijit.Dialog

问题

I have a Dialog with a form inside. The following code is just an example of what I'm trying to do. When you close a dijit.Dialog, if you dont't destroy recursively his children, you just can't reopen it (with the same id).

If you don't want to destroy your widget you can do something like that :

var createDialog = function(){
    try{
    // try to show the hidden dialog
        var dlg = dijit.byId('yourDialogId');
        dlg.show();
    } catch (err) {
    // create the dialog
        var btnClose = new dijit.form.Button({
           label:'Close',
           onClick: function(){
               dialog.hide();
           }
        }, document.createElement("button"));
        var dialog = new dijit.Dialog({
           id:'yourDialogId',
           title:'yourTitle',
           content:btnClose
        });
        dialog.show();
    }
}

I hope this can help but with this code the error thrown is :

exception in animation handler for: onEnd (_base/fx.js:153)

Type Error: Cannot call method 'callback' of undefined (_base/fx.js:154)

I have to say I'm a little lost with this one ! It is driving me crazy ^^

PS : sorry for my "French" English ^^

回答1:

I'll introduce you to your new best friend: dojo.hitch()

This allows you to bind your onClick function to the context in which it was created. Chances are, when you push the button in your code, it is calling your .show() .hide() form the context of the global window. var dlg was bound to your createDialog function, so it's insides are not visible to the global window, so the global window sees this as undefined.

Here's an example of what I changed to your code:

var createDialog = function(){

    // try to show the hidden dialog
    var dlg = dijit.byId('yourDialogId');
    dlg.show();

    // create the dialog
    var btnClose = new dijit.form.Button({
        label:'Close',
        onClick: function(){
            dojo.hitch(this, dlg.hide());
        }
    }, document.createElement("button"));
    dlg.domNode.appendChild(btnClose.domNode);
    var btnShow = new dijit.form.Button({
        label : 'Open',
        onClick : function() {
            dojo.hitch(this, dlg.show());
        }
    }, document.createElement("Button"));
    dojo.body().appendChild(btnShow.domNode);
};  

dojo.ready(function() {
    createDialog();
});

Note the use of dojo.hitch() to bind any future calls or clicks of the various buttons to the context in which the dlg was created, forever granting the button's onclick method access to the inside of the createDialog function, where var dlg exists.

回答2:

hi if i understand correctly, you didn't need to destroy dijit.Dialog every time. E.g.:

HTML: define simple button:

<button id="buttonTwo" dojotype="dijit.form.Button" onclick="showDialog();" type="button">
   Show me!
</button>

Javascript:

// required 'namespaces'
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");

// creating dialog
var secondDlg;
dojo.addOnLoad(function () {
        // define dialog content
        var content = new dijit.form.Button({
                    label: 'close',
                    onClick: function () {
                              dijit.byId('formDialog').hide();
                             }
            });

     // create the dialog:
         secondDlg = new dijit.Dialog({
                id: 'formDialog',
                title: "Programatic Dialog Creation",
                style: "width: 300px",
                content: content
            });
        });

          function showDialog() {
            secondDlg.show();
         }

See Example and reed about dijit.dialog

来源：https://stackoverflow.com/questions/5577096/dojo-exception-on-hiding-a-dijit-dialog

标签

dojo

dijit.form