Add the view grid_and_graph.html

views/plugin_event/grid_and_graph.html

+{{
+    #--------------------------------------------------------------------------
+    #
+    # The python controller return the variables:
+    #   - cfg_store (Storage)
+    #   - grid (Storage)
+    #   - title (string)
+    #   - img (string)
+    #
+    #--------------------------------------------------------------------------
+    # Prepare the data
+    #   - The HTML tilte
+    #   - The DIV blocks
+    #   - Export python variables to javascript
+    #--------------------------------------------------------------------------
+    import json
+    import urllib
+
+    from datetime import datetime
+
+    #
+    # The title and the DIV block
+    #
+    response.write(H2(title, _class="dbui-h2 dbui-small-cap"))
+
+    divgrid = "grid-%s" % id(cfg_store)
+    response.write(DIV(_id=divgrid))
+
+    #
+    # Convert store and grid configuration as string
+    #
+    cfg_grid = json.dumps(grid, cls=dbui.JSONEncoder)
+    cfg_store = json.dumps(cfg_store, cls=dbui.JSONEncoder)
+
+    #
+    # build the url to retrieve the png or pdf image
+    # it should contains the  current "vars" use to generate the image
+
+    myapp = request.application
+    myvars = urllib.urlencode(request.vars)
+
+    url_pdf = "/%s/plugin_event/graph_mpl.pdf?%s" % (myapp, myvars)
+    url_png = "/%s/plugin_event/graph_mpl.png?%s" % (myapp, myvars)
+
+    #
+    # translate
+
+    trExport = T("Right click on the image in order to export it...")
+    trToPDF = T("Export to PDF...")
+    trToPNG = T("Export to PNG...")
+
+    #
+    # the footer, processing time of the request
+    #
+    delta = (datetime.now()-request.now).total_seconds()
+    delta = T('Processing time %s seconds') % round(delta, 2)
+
+    style = ["font-size: 10px;",
+             "margin-left: 10px;",
+             "margin-bottom: 3ex;",
+             "margin-top: 2ex;"]
+
+    response.write(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,
+        cfgPanel, cfgPanelImg, i, grid, menu, panel;
+
+    /**
+     * Configure the Ext.grid.Panel
+     *
+     * NOTE ExtJS 6.2.0
+     * With ExtJS 6.2.0, the configuration is not working:
+     *
+     *      plugins: ['pGridExport', 'pMathJax']
+     *
+     * It is related to layout and pMathJax !
+     * Remove pMathJax since its use is marginal in that application.
+     */
+
+    cfgGrid = Ext.apply(cfgGrid, {
+        plugins: ['pGridExport'],
+        store: cfgStore,
+        forceFit: true,
+        padding: "10 30 10 30",
+        xtype: "xgrid"
+    });
+
+    /**
+     * Configure the panel to include the image
+     *
+     * The panel allow to expose a context menu which can be used to
+     * export the image in different format
+     */
+
+    cfgPanelImg = {
+        border: false,
+        html: '<img src="data:image/svg+xml;utf8,{{=img}}" height=400></img>',
+    };
+
+    /**
+     * Create the main panel
+     */
+
+    panel = Ext.create('Ext.panel.Panel', {
+        border: false,
+        items: [cfgGrid, cfgPanelImg],
+        renderTo: "{{=divgrid}}"
+    });
+
+    /**
+     * Add the context menu to extract the image
+     */
+
+    menu = Ext.create("Ext.menu.Menu", {
+        items: [{
+            text: "{{=trToPNG}}",
+            href: "{{=url_png}}",
+            iconCls: "xminetype-png"
+        }, {
+            text: "{{=trToPDF}}",
+            href: "{{=url_pdf}}",
+            iconCls: "xminetype-pdf"
+        }]
+    });
+
+    panel.body.on("contextmenu", function(event) {
+        event.stopEvent();
+        menu.showAt(event.getXY());
+    });
+
+</script>