Commit f97f81b5 authored by LE GAC Renaud's avatar LE GAC Renaud
Browse files

Redesign the grid_and_graph view in order to destroy temporarely objects properly.

parent d50ef03a
......@@ -10,7 +10,7 @@
#--------------------------------------------------------------------------
# Prepare the data
# - The HTML tilte
# - The DIV blocks
# - URL to export image
# - Export python variables to javascript
#--------------------------------------------------------------------------
import json
......@@ -19,12 +19,9 @@
from datetime import datetime
#
# The title and the DIV block
# the title
#
response.write(H2(title, _class="dbui-h2 dbui-small-cap"))
divgrid = "grid-%s" % id(cfg_store)
response.write(DIV(_id=divgrid))
title = H2(title, _class="dbui-h2 dbui-small-cap")
#
# Convert store and grid configuration as string
......@@ -53,73 +50,88 @@
# the footer, processing time of the request
#
delta = (datetime.now()-request.now).total_seconds()
delta = T('Processing time %s seconds') % round(delta, 2)
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)))
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,
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.
*/
cfgPanelImg, footer, main, header, menu, panel, tabPanel;
//
// Retrieve the mainPanel which will embedded the grid and the image
// viewport > tabpanel > tab[active] > panelwithurlselector > mainPanel
//
tabPanel = Ext.ComponentQuery.query("xviewport > tabpanel")[0];
main = tabPanel.getActiveTab().down("xpanelwithurlselector #mainPanel");
//
// remove all embeded object
// Avoid proliferation of useless object
// Keep the memory foot print low
//
main.removeAll(true);
//
// configure the header
//
header = {
border: false,
html: '{{=title}}',
xtype: "panel"
};
//
// configure the Ext.grid.Panel
//
cfgGrid = Ext.apply(cfgGrid, {
plugins: ['pGridExport'],
plugins: ["pGridExport"],
store: cfgStore,
forceFit: true,
padding: "10 30 10 30",
padding: "10 30 0 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 = {
//
// configure the panel housing the image
//
cfgPanelImg = {
border: false,
html: '<img src="data:image/svg+xml;utf8,{{=img}}" height=400></img>',
itemId: "graphPanel"
};
//
// configure the footer
//
footer = {
border: false,
html: '<img src="data:image/svg+xml;utf8,{{=img}}" height=400></img>',
itemId: "graphPanel"
html: '{{=delta}}',
xtype: "panel"
};
/**
* Create the main panel
*/
panel = Ext.create('Ext.panel.Panel', {
//
// add sub-panels to the main one
//
main.add({
border: false,
items: [cfgGrid, cfgPanelImg],
renderTo: "{{=divgrid}}"
items: [header, cfgGrid, cfgPanelImg, footer],
layout: "anchor",
scrollable: true,
xtype: "panel"
});
/**
* Add the context menu to extract the image
*/
//
// Add the context menu to extract the image
//
menu = Ext.create("Ext.menu.Menu", {
items: [{
text: "{{=trToPNG}}",
......@@ -132,7 +144,7 @@
}]
});
panel.getComponent('graphPanel').body.on("contextmenu", function(event) {
main.down("#graphPanel").body.on("contextmenu", function(event) {
event.stopEvent();
menu.showAt(event.getXY());
});
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment