Add the components RowEventData, RowHistoryData and the grid plugin RowWidget.

modules/plugin_event/ui_core.py

@@ -91,17 +91,15 @@ class CoreUi(object):
         mdf.hide_columns("data")
 
         row_widget = {
-            "ptype": "rowwidget",
+            "expandOnDblClick": False,
+            "selectRowOnExpand": False,
+            "ptype": "pRowWidget",
             "widget": {
-                "xtype": "xuserdata",
+                "xtype": "xroweventdata",
                 "bind": {
-                    "value": "{record.EventsData}"
+                    "eventData": "{record.EventsData}"
                 },
-                "defaults": {"anchor": "90%"},
-                "colProperty": {"width": 80},
-                "colType": {"width": 80},
-                "padding": "10 0 12 50",
-                "readOnly": True
+                "padding": "10 0 12 50"
             }
         }
 
@@ -203,11 +201,26 @@ class CoreUi(object):
         # Grid
         #
         mdf = gridModifier("history")
+
+        row_widget = {
+            "expandOnDblClick": False,
+            "selectRowOnExpand": False,
+            "ptype": "pRowWidget",
+            "widget": {
+                "xtype": "xrowhistorydata",
+                "bind": {
+                    "historyData": "{record.HistoryData}"
+                },
+                "padding": "10 0 12 50"
+            }
+        }
+
         mdf.configure(plugins=["pGridRowEditorConfirmDelete",
                                "pGridRowEditorDblClick",
                                "pHistoryContextMenu",
                                "pGridToolbar",
-                               "pGridPaging"])
+                               "pGridPaging",
+                               row_widget])
 
         mdf.hide_columns("data",
                          "id_domains",

static/app.js

@@ -9,28 +9,31 @@ if (Dbui.debug) {
         disableCaching: false,
         enabled: true,
         paths: {
-            'Dbui': '/' + Dbui.name + '/static/plugin_dbui/src',
-            'Ext': '/' + Dbui.name + '/static/plugin_extjs/src',
-            'Event': '/' + Dbui.name + '/static/plugin_event/src'
+            "Dbui": "/" + Dbui.name + "/static/plugin_dbui/src",
+            "Ext": "/" + Dbui.name + "/static/plugin_extjs/src",
+            "Event": "/" + Dbui.name + "/static/plugin_event/src"
         }
     });
 }
 
-Ext.require('Dbui.container.Viewport');
-Ext.require('Dbui.plugin.MathJax');
+Ext.require("Dbui.container.Viewport");
+Ext.require("Dbui.plugin.MathJax");
 
-Ext.require('Ext.direct.Manager');
-Ext.require('Ext.direct.RemotingProvider');
-Ext.require('Ext.EventManager');
-Ext.require('Ext.tip.QuickTipManager');
+Ext.require("Ext.direct.Manager");
+Ext.require("Ext.direct.RemotingProvider");
+Ext.require("Ext.EventManager");
+Ext.require("Ext.tip.QuickTipManager");
 
-Ext.require('Event.form.field.Graph');
-Ext.require('Event.form.field.UserData');
-Ext.require('Event.form.field.UserDataMultiDefault');
-Ext.require('Event.form.field.Summary');
-Ext.require('Event.form.plugin.UserDataConsistency');
-Ext.require('Event.grid.HistoryFilter');
-Ext.require('Event.grid.plugin.HistoryContextMenu');
+Ext.require("Event.form.field.Graph");
+Ext.require("Event.form.field.UserData");
+Ext.require("Event.form.field.UserDataMultiDefault");
+Ext.require("Event.form.field.Summary");
+Ext.require("Event.form.plugin.UserDataConsistency");
+Ext.require("Event.grid.plugin.RowWidget");
+Ext.require("Event.grid.HistoryFilter");
+Ext.require("Event.grid.plugin.HistoryContextMenu");
+Ext.require("Event.grid.RowEventData");
+Ext.require("Event.grid.RowHistoryData");
 
 Ext.onReady(function(){
 
@@ -58,8 +61,8 @@ Ext.onReady(function(){
     // NOTE: It should work when the browser is closed to.
     // Not working with FireFox 17.0.8, web2py 2.4.5 and Ext JS 3.4.0.
     // nor with Firefox 38, web2py 2.14.6, Ext JS 6.0.1
-    Ext.getWin().on('beforeunload', Dbui.closeUserSession);
+    Ext.getWin().on("beforeunload", Dbui.closeUserSession);
 
 	// Instantiate the application
-	app = Ext.create('Dbui.container.Viewport', Dbui.config.viewport);
+	app = Ext.create("Dbui.container.Viewport", Dbui.config.viewport);
 });
\ No newline at end of file

static/plugin_event/locale/event-lang-fr.js

@@ -56,5 +56,17 @@ Ext.define("Event.locale.grid.plugin.HistoryContextMenu", {
             "</ul>" +
         "3. Editer l'évènement dupliqué.",
     textUpdate: "Actualiser",
+});
+
+Ext.define("Event.locale.grid.RowEventData", {
+    override: "Event.grid.RowEventData",
+    textProperty: "propriété",
+    textType: "type",
+    textValue: "valeur"
+});
 
+Ext.define("Event.locale.grid.RowHistoryData", {
+    override: "Event.grid.RowHistoryData",
+    textProperty: "propriété",
+    textValue: "valeur"
 });

static/plugin_event/src/grid/RowEventData.js

+/**
+ * Component to display the event model in Ext.grid.Panel.
+ * It has been design to work with the plugin {@link Ext.grid.plugin.RowWidget}.
+ *
+ * The link between the row and this component is performed via the binding
+ * mechanism [View model and data binding](http://docs.sencha.com/extjs/6.2.0/guides/application_architecture/view_models_data_binding.html)
+ * via the configuration {@link Event.grid.RowEventData#eventData}.
+ *
+ * @since 0.7.4
+ *
+ */
+Ext.define("Event.grid.RowEventData", {
+
+    extend: "Ext.grid.Panel",
+    alias: "widget.xroweventdata",
+    uses: "Ext.data.Store",
+
+    /**
+     * @cfg {Object}
+     * Contains the event model which will be displayed in a grid:
+     *
+     *     {
+     *          property1: {
+     *              type: "string",
+     *              value: ""
+     *          },
+     *          property2: {
+     *              type: "string",
+     *              value: "[val1, val2, val3]"
+     *          }
+     *      }
+     *
+     * This configuration has to be bind to the grid by the RowWidget plugin:
+     *
+     *  eventData = "{record.EventsData}"
+     *
+     */
+     eventData: null,
+
+    // Predefined configuration options
+    forceFit: true,
+
+    // private properties for internationalization
+    textProperty: "property",
+    textType: "type",
+    textValue: "value",
+
+    // jshint strict: false
+
+    // private method requests by the component model of ExtJS
+    initComponent: function () {
+
+        var me = this;
+
+        // the store for the grid
+        me.store = Ext.create("Ext.data.Store", {
+            fields: [
+                {name: "property", type: "string"},
+                {name: "type", type: "string", defaultValue: "string"},
+                {name: "value", type: "string"}
+            ],
+            proxy: "memory"
+        });
+
+        // the columns of the grid
+        me.columns =[{
+                dataIndex: "property",
+                flex: 0.5,
+                sortable: true,
+                text: me.textProperty
+            }, {
+                dataIndex: "type",
+                flex: 0.5,
+                sortable: true,
+                text: me.textType
+            }, {
+                dataIndex: "value",
+                flex: 4,
+                sortable: true,
+                text: me.textValue
+        }];
+
+        // instantiate the base class
+        me.callParent(arguments);
+
+        // hide the dirty flag when a cell is modified
+        me.getView().markDirty = false;
+    },
+
+    // jshint strict: true
+
+    /**
+     * Setter for the eventData property.
+     * Method required by the binding model.
+     *
+     * @param {Object} value
+     * The object should has the following structure:
+     *
+     *     {
+     *          property1: {
+     *              type: "string",
+     *              value: ""
+     *          },
+     *          property2: {
+     *              type: "string",
+     *              value: "[val1, val2, val3]"
+     *          }
+     *      }
+     *
+     */
+    setEventData: function (value) {
+
+        "use strict";
+
+        var me = this,
+            store = me.getStore(),
+            model = store.getProxy().getModel(),
+            records = [],
+            record;
+
+        me.eventData = value;
+
+        if (value) {
+
+            Ext.Object.each(value, function (property) {
+                record = model.create();
+                record.set("property", property);
+                record.set("type", value[property].type);
+                record.set("value", value[property].value);
+                records.push(record);
+            });
+
+            store.loadData(records, false);
+
+        } else {
+            store.removeAll(true);
+        }
+
+        me.getView().refresh();
+    }
+});

static/plugin_event/src/grid/RowHistoryData.js

+/**
+ * Component to display the user block model in Ext.grid.Panel.
+ * It has been design to work with the plugin {@link Ext.grid.plugin.RowWidget}.
+ *
+ * The link between the row and this component is performed via the binding
+ * mechanism [View model and data binding](http://docs.sencha.com/extjs/6.2.0/guides/application_architecture/view_models_data_binding.html)
+ * via the configuration {@link Event.grid.RowHistoryData#historyData}.
+ *
+ * @since 0.7.4
+ *
+ */
+Ext.define("Event.grid.RowHistoryData", {
+
+    extend: "Ext.grid.Panel",
+    alias: "widget.xrowhistorydata",
+    uses: "Ext.data.Store",
+
+    /**
+     * @cfg {Object}
+     * Contains the user data block which will be displayed in a grid:
+     *
+     *     {
+     *          property1: val1,
+     *          property2: val2
+     *      }
+     *
+     * This configuration has to be bind to the grid by the RowWidget plugin:
+     *
+     *  historyData = "{record.HistoryData}"
+     *
+     */
+     historyData: null,
+
+    // Predefined configuration options
+    forceFit: true,
+
+    // private properties for internationalization
+    textProperty: "property",
+    textValue: "value",
+
+    // jshint strict: false
+
+    // private method requests by the component model of ExtJS
+    initComponent: function () {
+
+        var me = this;
+
+        // the store for the grid
+        me.store = Ext.create("Ext.data.Store", {
+            fields: [
+                {name: "property", type: "string"},
+                {name: "value", type: "string"}
+            ],
+            proxy: "memory"
+        });
+
+        // the columns of the grid
+        me.columns =[{
+                dataIndex: "property",
+                flex: 0.5,
+                sortable: true,
+                text: me.textProperty
+            }, {
+                dataIndex: "value",
+                flex: 4,
+                sortable: true,
+                text: me.textValue
+        }];
+
+        // instantiate the base class
+        me.callParent(arguments);
+
+        // hide the dirty flag when a cell is modified
+        me.getView().markDirty = false;
+    },
+
+    // jshint strict: true
+
+    /**
+     * Setter for the historyData property.
+     * Method required by the binding model.
+     *
+     * @param {Object} value
+     * The object should has the following structure:
+     *
+     *     {
+     *          property1: val1,
+     *          property2: val2
+     *      }
+     *
+     */
+    setHistoryData: function (value) {
+
+        "use strict";
+
+        var me = this,
+            store = me.getStore(),
+            model = store.getProxy().getModel(),
+            records = [],
+            record;
+
+        me.eventData = value;
+
+        if (value) {
+
+            Ext.Object.each(value, function (prop, val) {
+                record = model.create();
+                record.set("property", prop);
+                record.set("value", val);
+                records.push(record);
+            });
+
+            store.loadData(records, false);
+
+        } else {
+            store.removeAll(true);
+        }
+
+        me.getView().refresh();
+    }
+});

static/plugin_event/src/grid/plugin/RowWidget.js

+/**
+ * With the plugin {@lnk Ext.grid.plugin.RowWidget}, it is possible to expand
+ * the row in order to display the database field events.data and history.data
+ * in an Ext.grid.Panel.
+ *
+ * However, in version 6.2.0, the content of the row expander disappears
+ * when the database record is update.
+ *
+ * This version fixed this issue.
+ *
+ * @since 0.7.4
+ *
+ */
+ Ext.define("Event.grid.plugin.RowWidget", {
+
+    extend: "Ext.grid.plugin.RowWidget",
+    alias: "plugin.pRowWidget",
+
+    // supersede the method of Ext.grid.plugin.RowWidget#bindView
+    bindView: function(view) {
+
+        "use strict";
+        var me = this;
+
+        me.viewListeners = view.on({
+            refresh: me.onViewRefresh,
+            itemadd: me.onItemAdd,
+            itemupdate: me.onItemUpdate,
+            scope: me,
+            destroyable: true
+        });
+        Ext.override(view, me.viewOverrides);
+    },
+
+    onItemUpdate: function(record, index, node, view) {
+
+        "use strict";
+        var me = this;
+
+        me.addWidget(view, record);
+    }
+});
\ No newline at end of file