Find a solution to run scroll bar in panelWithSelector and to run MathJax

modules/plugin_dbui/navtree.py

@@ -51,17 +51,15 @@ def to_panelWithUrlSelector(formItems,
         
     cfg = {'baseUrl': url,
            'ctrlField': ctrlField,
+           'isMathJax': is_mathjax(),
            'panelCfg': None,
            'selectorCfg':None,
            'xtype': 'xpanelwithurlselector'}
 
-    # configuration of the main panel displaying URL
+    # configuration of the child panel displaying URL
     cfg['panelCfg'] = {'plugins': [], 
                        'xtype': 'panel'}
-    
-    if is_mathjax:
-        cfg['panelCfg']['plugins'].append('pPanelMathJax')
-                           
+                               
     # configuration of the selector
     cfg['selectorCfg'] = {'defaults': {'anchor': '99%'},
                           'items': formItems,

static/plugin_dbui/src/apppanelwithurlselector.js

 /**
- * A panel displaying an url content with an collpasible selector.
- * the selector allow to setup the url parameters and to launch the
+ * A panel displaying an url content with a collpasible selector.
+ * The selector allows to setup the url parameters and to launch the
  * request to the server.
  * 
- * The url is build as baseUrl or baseUrl/CtrlFieldValue if ctrlField is defined.
- * The value of the other field are pass as Field1=Field1Value ,Field2=Field2Value
- * in a POST transfert
+ * The url is build as baseUrl or baseUrl/CtrlFieldValue if ctrlField 
+ * is defined. The value of the other fields are pass as Field1=Field1Value, 
+ * Field2=Field2Value via the POST transfert
  *
+ * Mathematical symbols will be interpreted, if the javascript library 
+ * mathjax is load. Use the isMathJax property.
+ * 
  * The type of this component is xpanelwithurlselector.
  *  
  * @extend: App.PanelWithSelector
@@ -27,6 +30,11 @@ App.PanelWithUrlSelector = Ext.extend(App.BasePanelWithSelector, {
      */
     ctrlField: null,
     
+    /**
+     * @param {Boolean} isMathJax 
+     */
+    isMathJax: false,
+    
     /**
      * Private attributes for internationalization
      */
@@ -36,28 +44,14 @@ App.PanelWithUrlSelector = Ext.extend(App.BasePanelWithSelector, {
      * Require by the ExtJS model
      */    
     initComponent: function () {
-        
+
         App.PanelWithUrlSelector.superclass.initComponent.call(this);
-        
+
         // connect the buttons
         this.goButton.on('click', this.onGo, this);
         this.resetButton.on('click', this.onReset, this);
     },
 
-    /**
-     * Handler to catch HTTP error (see Ext.Update.update)
-     * @param {Ext.Element} el the element being update
-     * @param {boolean} success true for succes false for failure
-     * @param {XMLHttpRequest} response
-     * @param {Object} options
-     */
-    onError: function(el, success, response, options) {
-
-        if(success === false) {
-            el.updateManager.abort();
-            el.update(response.responseText);
-        }
-    },
     /**
      * handler to build the URL and to load it in the panel
      */
@@ -65,11 +59,14 @@ App.PanelWithUrlSelector = Ext.extend(App.BasePanelWithSelector, {
         
         var fields,
             i,
-            panel = this.getComponent('mainPanel'),
+            mainPanel = this.getComponent('mainPanel'),
             params = {},
             selector = this.getComponent('selectorPanel'),
             url = this.baseUrl;
-        
+
+        // activate the autoscrolling
+        mainPanel.setAutoScroll(true);
+                
         // basic fields
         fields = selector.findByType('field');
         for (i = 0; i < fields.length; i += 1) {
@@ -88,15 +85,44 @@ App.PanelWithUrlSelector = Ext.extend(App.BasePanelWithSelector, {
             });
         }
 
-        panel.load({
-            callback: this.onError,
+        mainPanel.load({
+            callback: this.onLoad,
             params: params,
-            url: url,
+            scope: this,
             text: this.textLoad,
+            url: url,
             timeout: 30 
         });        
     },
 
+    /**
+     * Handler call when the web page is load in the panel.
+     * It is usefeul to detect HTTP error and to perform post 
+     * processing (MathJax).
+     * 
+     * Arguments ares those of the Ext.Update.update.
+     * @param {Ext.Element} el the element being update
+     * @param {boolean} success true for succes false for failure
+     * @param {XMLHttpRequest} response
+     * @param {Object} options
+     */
+    onLoad: function(el, success, response, options) {
+
+        var panelWithSelector = this;
+
+        // errors detection
+        if(success === false) {
+            el.updateManager.abort();
+            el.update(response.responseText);
+        }
+        
+        // post processing
+        if(panelWithSelector.isMathJax) {
+            MathJax.Hub.PreProcess();
+            MathJax.Hub.Process();
+        }
+    },
+
     /**
      * Handler to reset the selector
      */