Update RowEventData, the user can now modify the value.

static/plugin_event/src/grid/RowEventData.js

 /**
- * Component to display the event model in Ext.grid.Panel.
+ * Component to display an to update the event model in Ext.grid.Panel.
  * It has been design to work with the plugin {@link Ext.grid.plugin.RowWidget}.
  *
+ * Only the value of the model can be modified by the user.
+ * In order to add properties or to modify their types use
+ * the Event.form.field.UserData.
+ *
  * 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}.
@@ -15,6 +19,7 @@ Ext.define("Event.grid.RowEventData", {
     alias: "widget.xroweventdata",
     uses: "Ext.data.Store",
 
+    config: {
         /**
          * @cfg {Object}
          * Contains the event model which will be displayed in a grid:
@@ -37,8 +42,19 @@ Ext.define("Event.grid.RowEventData", {
          */
         eventData: null,
 
-    // Predefined configuration options
+        /**
+         * @cfg {Boolean}
+         * Activate the read only mode when it is true.
+         * In that case, the user cannot modify the value anymore.
+         *
+         */
+        readOnly: false
+    },
+
+
+    // Predefined configuration options for the grid
     forceFit: true,
+    plugins: [{ptype: 'cellediting', clicksToEdit: 1}],
 
     // private properties for internationalization
     textProperty: "property",
@@ -50,7 +66,8 @@ Ext.define("Event.grid.RowEventData", {
     // private method requests by the component model of ExtJS
     initComponent: function () {
 
-        var me = this;
+        var me = this,
+            readOnly = me.readOnly;
 
         // the store for the grid
         me.store = Ext.create("Ext.data.Store", {
@@ -75,20 +92,88 @@ Ext.define("Event.grid.RowEventData", {
                 text: me.textType
             }, {
                 dataIndex: "value",
+                editor: (readOnly ? undefined : 'textfield'),
                 flex: 4,
                 sortable: true,
                 text: me.textValue
         }];
 
+        me.selType = (readOnly ? undefined : 'cellmodel');
+
         // instantiate the base class
         me.callParent(arguments);
 
         // hide the dirty flag when a cell is modified
         me.getView().markDirty = false;
+
+        // activate the two way binding
+        // the event model is update in the database when the user
+        // modify a value. Here we mimic the behaviour of a spreadsheet.
+        if (!readOnly) {
+            me.store.on("update", me.onUpdate, me);
+        }
+    },
+
+    // private method requests by the component model of ExtJS
+    beforeDestroy: function () {
+
+        var me = this;
+
+        if (!me.readOnly) {
+            me.store.un("update", me.onUpdate, me);
+        }
+
+        me.callParent(arguments);
     },
 
     // jshint strict: true
 
+    /**
+     * Setter for the eventData property.
+     * Method required by the binding model.
+     *
+     * @return {Object}
+     *
+     *     {
+     *          property1: {
+     *              type: "string",
+     *              value: ""
+     *          },
+     *          property2: {
+     *              type: "string",
+     *              value: "[val1, val2, val3]"
+     *          }
+     *      }
+     *
+     */
+    getEventData: function () {
+
+        "use strict";
+        var me = this,
+            value = {};
+
+        me.getStore().each(function(record) {
+            value[record.get("property")] = {
+                "type": record.get("type"),
+                "value": record.get("value")
+            };
+        });
+
+        return value;
+    },
+
+     /**
+     * Handler to update the database
+     *
+     */
+    onUpdate: function () {
+
+        "use strict";
+        var me = this;
+
+        me.publishState("eventData", me.getEventData());
+    },
+
    /**
      * Setter for the eventData property.
      * Method required by the binding model.