First draft of the grid plugin Export.

controllers/reports.py

@@ -48,7 +48,7 @@ def report_4():
     """
     import json
     
-    cfg = dict()
+    cfg = dict(groupField='controller')
 
     cfg['fields'] = [{'name': 'controller', 'type': 'string'},
                      {'name': 'host', 'type': 'string'},

static/plugin_dbui/src/grid/Panel.js

@@ -20,6 +20,7 @@ Ext.define('App.grid.Panel', {
         'Ext.grid.column.Number',
         'Ext.grid.column.RowNumberer',
         'Ext.grid.column.Template',
+        'App.grid.plugin.Export',
         'App.grid.plugin.Paging',
         'App.grid.plugin.RowEditorConfirmDelete',
         'App.grid.plugin.RowEditorContextMenu',

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, ...
+ *
+ */
+Ext.define('App.grid.plugin.Export', {
+
+    extend: 'Ext.AbstractPlugin',
+    alias: 'plugin.pGridExport',
+
+    delimiter: '"',
+    separator: ',',
+
+    // Pre-defined configuration
+    pluginId: 'gridExport',
+
+    /**
+     * Initialize the plugin
+     *
+     * @param {App.grid.Panel} grid
+     *
+     */
+    init: function (grid) {
+
+        "use strict";
+
+        this.setCmp(grid);
+
+    },
+
+    // private
+    // add delimiter to value for CSV export
+    addDelimiter: function (value) {
+
+        "use strict";
+
+        if (!Ext.isNumeric(value)) {
+            value = this.delimiter + value + this.delimiter;
+        }
+        return value;
+    },
+
+    /**
+     * Export the content of the grid as a CSV file
+     */
+    toCSV: function () {
+
+        "use strict";
+
+        var cell,
+            csv = [],
+            el = this.getCmp().getView().getEl(),
+            li,
+            row,
+            value;
+
+        // scan each row of the table
+        row = el.down("tr");
+        do {
+            // scan each cell of the row
+            cell = row.down("td");
+
+            // NOTE:
+            // A standard cell is a x-grid-cell
+            // however it is a x-group-hd-container when the grouping is used
+            // a) extract the grouping value in the first children
+            // b) extract the cells of the first row in the second children
+            //    keep in in that they can be null is the group is closed.
+            if (cell.dom.className === "x-group-hd-container") {
+                value = this.addDelimiter(cell.dom.childNodes[0].textContent);
+                csv.push(value);
+                cell = cell.down("td");
+            }
+
+            // process standard x-grid-cells of the current row
+            if (cell) {
+                li = [];
+                do {
+                    value = this.addDelimiter(cell.dom.textContent);
+                    li.push(value);
+                    cell = cell.next();
+                } while (cell);
+
+                csv.push(li.join(this.separator));
+            }
+
+            // move to the next row
+            row = row.next();
+        } while (row);
+
+        console.log(csv.join('\n'));
+    }
+});
\ No newline at end of file

views/reports/report_4.html

+Click on a row to launch the export ...
 {{
     #--------------------------------------------------------------------------
     #
@@ -29,6 +30,7 @@
      */
 
     var grid = Ext.create('Ext.grid.Panel', {
+        plugins: ['pGridExport'],
         store: Ext.create('Ext.data.ArrayStore', cfgStore),
         columns: [
             {text: "Controller", dataIndex: 'controller', flex: 0.8},
@@ -36,10 +38,15 @@
             {text: "Collections", dataIndex: 'collections', flex: 1.2},
             {text: "Ratio", dataIndex: 'ratio', flex: 0.5}
         ],
+        features: [{ftype:'grouping'}],
         forceFit: true,
         //hideHeaders: true,
         padding: "10 40 20 60",
         renderTo: 'grid-{{=divgrid}}'
     });
 
+    grid.on('select', function () {
+        this.getPlugin('gridExport').toCSV();
+    }, grid);
+
 </script>