Redesign the grid2 view in order to destroy poperly temporarely objects.

views/plugin_event/grid2.html

@@ -9,19 +9,15 @@
     #--------------------------------------------------------------------------
     # Prepare the data
     #   - The HTML tilte
-    #   - The DIV blocks
     #   - Export python variables to javascript
     #--------------------------------------------------------------------------
     import json
     from datetime import datetime
 
     #
-    # The title and the DIV block
+    # The title
     #
-    divgrid = "grid-%s" % id(cfg_store)
-
-    response.write(H2(title, _class="dbui-h2 dbui-small-cap"))
-    response.write(DIV(_id=divgrid))
+    title = H2(title, _class="dbui-h2 dbui-small-cap")
 
     #
     # Convert store and grid configuration as string
@@ -40,37 +36,67 @@
              "margin-bottom: 3ex;",
              "margin-top: 2ex;"]
 
-    response.write(P(delta, _style="".join(style)))
+    delta = P(delta, _style="".join(style))
 
 }}
 <script type="text/javascript">
 
     var cfgGrid = {{=XML(cfg_grid)}},
         cfgStore = {{=XML(cfg_store)}},
-        columns = cfgGrid.columns,
-        features = cfgGrid.features,
-        divgrid = '{{=divgrid}}',
-        nColumns = columns.length,
-        i, grid;
+        footer, header, main, tabPanel;
 
-    // instantiate the grid
+    //
+    // Retrieve the mainPanel which will embedded the grid
+    // viewport > tabpanel > tab[active] > panelwithurlselector > mainPanel
+    //
+    tabPanel = Ext.ComponentQuery.query("xviewport > tabpanel")[0];
+    main = tabPanel.getActiveTab().down("xpanelwithurlselector #mainPanel");
 
-    // NOTE ExtJS 6.2.0
-    // With ExtJS 6.2.0, the configuration is not working:
     //
-    //      plugins: ['pGridExport', 'pMathJax']
+    // remove all embeded object
+    // Avoid proliferation of useless object
+    // Keep the memory foot print low
     //
-    // It is related to layout and pMathJax !
-    // Remove pMathJax since its use is marginal in that application.
+    main.removeAll(true);
 
+    //
+    // configure the header
+    //
+    header = {
+        border: false,
+        html: '{{=title}}',
+        xtype: "panel"
+    };
+
+    //
+    // configure the grid
+    //
     cfgGrid = Ext.apply(cfgGrid, {
         plugins: ['pGridExport'],
         store: cfgStore,
         forceFit: true,
         padding: "10 40 20 30",
-        renderTo: divgrid
+        xtype: "xgrid"
     });
 
-    Ext.create('Dbui.grid.Panel', cfgGrid);
+    //
+    // configure the footer
+    //
+    footer = {
+        border: false,
+        html: '{{=delta}}',
+        xtype: "panel"
+    };
+
+    //
+    // Add sub-panels to the main one
+    //
+    main.add({
+        border: false,
+        items: [header, cfgGrid, footer],
+        layout: "anchor",
+        scrollable: true,
+        xtype: "panel"
+    });
 
 </script>