Improve the logic to mask/unmask the widget.

static/plugin_dbui/src/panel/WithUrlSelector.js

@@ -71,7 +71,12 @@ Ext.define('App.panel.WithUrlSelector', {
 
         this.goButton.on('click', this.onGo, this);
         this.resetButton.on('click', this.onReset, this);
-        this.mainPanel.getLoader().on('load', this.onLoad, this);
+
+        this.mainPanel.getLoader().on({
+            beforeload: this.mask,
+            load: this.unmask,
+            scope: this
+        });
     },
 
     // Private method requires by the Ext JS component model
@@ -79,11 +84,33 @@ Ext.define('App.panel.WithUrlSelector', {
 
         this.goButton.un('click', this.onGo, this);
         this.resetButton.un('click', this.onReset, this);
-        this.mainPanel.getLoader().un('load', this.onLoad, this);
+
+        this.mainPanel.getLoader().un({
+            beforeload: this.mask,
+            load: this.unmask,
+            scope: this
+        });
 
         this.callParent(arguments);
     },
 
+    /**
+     * Mask the panel and its selector.
+     *
+     * @param {Boolean/String/Object} config
+     * load True to show the default LoadMask,
+     * a config object that will be passed to the LoadMask constructor,
+     * or a message String to show. False to hide the current LoadMask.
+     * @param {Boolean} [targetEl=false] True to mask the targetEl
+     * of this Component instead of the `this.el`. For example,
+     * setting this to true on a Panel will cause only the body to be masked.
+     */
+    mask: function (config, target) {
+
+        "use strict";
+        this.setLoading(this.textLoad);
+    },
+
     /**
      * Handler to build the URL and to load it in the panel.
      * The main panel is masked and the selector panel is disabled
@@ -109,9 +136,6 @@ Ext.define('App.panel.WithUrlSelector', {
             params[subfield.getName()] = subfield.getValue();
         }
 
-        // disable the selector during loading
-        this.selectorPanel.disable();
-
         // destroy embedded IFRAME in the mainPanel if any
         iframe = this.mainPanel.getEl().getById('mainPanelIframe');
         if (iframe) {
@@ -168,7 +192,7 @@ Ext.define('App.panel.WithUrlSelector', {
 
             // load HTML using the panel loader
             this.mainPanel.getLoader().load({
-                loadMask: true,
+                loadMask: false,
                 params: params,
                 text: this.textLoad,
                 url: url,
@@ -211,7 +235,6 @@ Ext.define('App.panel.WithUrlSelector', {
             iframe = this.mainPanel.getEl().getById('mainPanelIframe');
             iframe.on('load', function () {
                 Ext.MessageBox.hide();
-                this.selectorPanel.enable();
             }, this, {single: true});
         }
     },
@@ -268,5 +291,14 @@ Ext.define('App.panel.WithUrlSelector', {
         for (i = 0; i < fields.length; i += 1) {
             fields[i].reset();
         }
+    },
+
+    /**
+     * Remove the mask for the panel and its selector.
+     *
+     */
+    unmask: function () {
+        "use strict";
+        this.setLoading(false);
     }
 });
\ No newline at end of file