Add the context menu to export the grid content to CSV / LaTeX / PDF files

static/plugin_dbui/src/grid/plugin/Export.js

 /**
- * The plugin to export the content of the grid into a file.
- * Several format are available: CSV, latex, pdf, ...
+ * The plugin export the content of the grid, as display on the screen,
+ * into a file. Several formats are available: CSV, LaTex and PDF.
+ *
+ * A context menu gives access to the different possibilities.
+ *
+ * @since 0.6.1.7
  *
  */
 Ext.define('App.grid.plugin.Export', {
@@ -8,10 +12,33 @@ Ext.define('App.grid.plugin.Export', {
     extend: 'Ext.AbstractPlugin',
     alias: 'plugin.pGridExport',
 
+    /**
+     * @cfg {String}
+     * The CSV delimiter for stirng.
+     */
     delimiter: '"',
+
+    /**
+     * @cfg {String}
+     * The new line separator used in the CSV file.
+     */
     newLine: '\n',
+
+    /**
+     * @cfg {String}
+     * The CSV field separator.
+     *
+     */
     separator: ',',
 
+    // private properties for internationalization
+    textToCSV: 'Export to CSV...',
+    textToLaTeX: 'Export to LaTeX...',
+    textToPDF: 'Export to PDF...',
+
+    // private short cut
+    menu: null,
+
     // Pre-defined configuration
     pluginId: 'gridExport',
 
@@ -25,8 +52,36 @@ Ext.define('App.grid.plugin.Export', {
 
         "use strict";
 
+        // keep track of the grid
         this.setCmp(grid);
 
+        // the context menu
+        this.menu = Ext.create('Ext.menu.Menu', {
+            items : [{
+                text: this.textToCSV,
+                iconCls: 'xminetype-csv',
+                handler: this.toCSV,
+                scope: this
+            }, {
+                text: this.textToLaTeX,
+                iconCls: 'xminetype-tex',
+                handler: this.toLaTeX,
+                scope: this
+            }, {
+                text: this.textToPDF,
+                iconCls: 'xminetype-pdf',
+                handler: this.toPDF,
+                scope: this
+            }]
+        });
+
+        grid.on({
+            'containercontextmenu': this.onContainerContextMenu,
+            'headercontextmenu': this.onHeaderContextMenu,
+            'itemcontextmenu': this.onItemContextMenu,
+            scope: this
+        });
+
     },
 
     // private
@@ -41,10 +96,61 @@ Ext.define('App.grid.plugin.Export', {
         return value;
     },
 
+    /**
+     * Show the context menu when right clicking in an empty grid.
+     *
+     * @param {App.grid.Panel} grid
+     * @param {Ext.EventObject} event
+     * @param {Object} eOpts
+     *
+     */
+    onContainerContextMenu: function (grid, event, eOpts) {
+
+        "use strict";
+
+        event.stopEvent();
+        this.menu.showAt(event.getXY());
+    },
+
+    /**
+     * Inhibit the context menu when right clicking in the grid header.
+     *
+     * @param {Ext.grid.header.Container} gridheader
+     * @param {Ext.grid.column.Column} column
+     * @param {Ext.EventObject} event
+     * @param {HTMLElement} html
+     * @param {Object} eOpts
+     *
+     */
+    onHeaderContextMenu: function (gridheader, colum, event, html, eOpts) {
+
+        "use strict";
+        event.stopEvent();
+    },
+
+    /**
+     * Show the context menu when right clicking in the non-empty grid.
+     *
+     * @param {Ext.view.View} view
+     * @param {Ext.data.Model} record
+     * @param {HTMLElement} item
+     * @param {Ext.EventObject} event
+     * @param {Object} eOpts
+     *
+     */
+    onItemContextMenu: function (view, record, item, index, event, eOpts) {
+
+        "use strict";
+
+        event.stopEvent();
+        this.menu.showAt(event.getXY());
+    },
+
     /**
      * Export the content of the grid as a CSV file.
      * The method scan the HTML to find the rendered headers, rows
      * and cells content.
+     *
      * Hidden columns and rows are ignored.
      */
     toCSV: function () {
@@ -120,5 +226,25 @@ Ext.define('App.grid.plugin.Export', {
         });
         link.dom.click();
         link.destroy();
+    },
+
+    /**
+     * Export the content of the grid as a LaTex file.
+     *
+     */
+    toLaTeX: function () {
+
+       "use strict";
+
+    },
+
+    /**
+     * Export the content of the grid as a PDF file.
+     *
+     */
+    toPDF: function () {
+
+       "use strict";
+
     }
 });
\ No newline at end of file

views/reports/report_4.html

-Click on a row to launch the export ...
 {{
     #--------------------------------------------------------------------------
     #
@@ -45,8 +44,4 @@ Click on a row to launch the export ...
         renderTo: 'grid-{{=divgrid}}'
     });
 
-    grid.on('select', function () {
-        this.getPlugin('gridExport').toCSV();
-    }, grid);
-
 </script>