dojoxpagesxpages-extlib

Non closable dialogbox from Extension Library


I'm creating a dialogbox from ExtLib and I want to prevent users to press Escape or click on X icon.

I've checked several posts about same implementation but none of them using a Dialogbox from ExtLib.

I was able to hide icon with CSS and I'm trying with dojo.connect to prevent the use of Escape key:

    XSP.addOnLoad(function(){
    dojo.connect(dojo.byId("#{id:dlgMsg}"), "onkeypress", function (evt) {  
        if(evt.keyCode == dojo.keys.ESCAPE) {           
            dojo.stopEvent(evt);
        }
    });
});

Note I'm able to get it working only if I create my dialogbox manually and not from ExtLib; then I can use for example:

dojo.connect(dojo.byId("divDlgLock"), "onkeypress", function (evt) {
        if(evt.keyCode == dojo.keys.ESCAPE) {           
            dojo.stopEvent(evt);
        }
});

Any ideas?


Solution

  • By adding an output script block you can extend the existing declaration:

    <xp:scriptBlock id="scriptBlockNonCloseableDialog">
       <xp:this.value>
          <![CDATA[
             dojo.provide("extlib.dijit.OneUIDialogNonCloseableDialog");
             dojo.require("extlib.dijit.Dialog");
             dojo.declare(
                "extlib.dijit.OneUIDialogNonCloseableDialog",
                extlib.dijit.Dialog,
                {
                   baseClass: "",
                   templateString: dojo.cache("extlib.dijit", "templates/OneUIDialog.html"),
                   disableCloseButton: true,
                   _onKey: function(evt){
                   if(this.disableCloseButton &&
                      evt.charOrCode == dojo.keys.ESCAPE) return;
                      this.inherited(arguments);
                   },
                   _updateCloseButtonState: function(){
                      dojo.style(this.closeButtonNode,
                      "display",this.disableCloseButton ? "none" : "block");
                   },
                   postCreate: function(){
                      this.inherited(arguments);
                      this._updateCloseButtonState();
                      dojo.query('form', dojo.body())[0].appendChild(this.domNode);
                   },
                   _setup: function() {
                      this.inherited(arguments);
                      if (this.domNode.parentNode.nodeName.toLowerCase() == 'body')
                         dojo.query('form', dojo.body())[0].appendChild(this.domNode);               
                   }        
                }
             );
    
             // This is used by the picker dialog to grab the correct UI
             XSP._dialog_type="extlib.dijit.OneUIDialogNonCloseableDialog";
          ]]>
       </xp:this.value>
    </xp:scriptBlock>