Update TrackEvents.form.field.UserData to add configuration: colProperty,...

Update TrackEvents.form.field.UserData to add configuration: colProperty, colType, colValue and readOnly.

static/track_events/src/form/field/UserData.js

@@ -17,6 +17,42 @@ Ext.define('TrackEvents.form.field.UserData', {
         anchor: '100%'
     },
 
+    /**
+     * @cfg {Object}
+     * Configuration of the column "property".
+     * Useful to tune the width of the column.
+     */
+     colProperty: {
+         flex: 0.7
+     },
+
+    /**
+     * @cfg {Object}
+     * Configuration of the column "type".
+     * Useful to tune the width of the column.
+     *
+     */
+     colType: {
+         flex: 0.7
+     },
+
+    /**
+     * @cfg {Object}
+     * Configuration of the column "value".
+     * Useful to tune the width of the column.
+     *
+     */
+     colValue: {
+         flex: 1
+     },
+
+    /**
+     * @cfg {Boolean}
+     * Disable the context menu when readOnly is true
+     *
+     */
+    readOnly: false,
+
     // private short cuts
     grid: null,
     menu: null,
@@ -46,8 +82,8 @@ Ext.define('TrackEvents.form.field.UserData', {
     initComponent: function () {
 
         var me = this,
-            grid,
-            store;
+            readOnly = me.readOnly,
+            columns, grid, store;
 
         // the store used by the grid
         store = {
@@ -65,30 +101,34 @@ Ext.define('TrackEvents.form.field.UserData', {
             columns: [{
                 text: me.textProperty,
                 dataIndex: 'property',
-                flex: 1.5,
                 menuDisabled: true,
                 sortable: false
             }, {
                 text: me.textType,
                 dataIndex: 'type',
-                editor: me.typeEditor(),
-                flex: 0.7,
+                editor: (readOnly ? undefined : me.typeEditor()),
                 menuDisabled: true,
                 sortable: false
             }, {
                 text: me.textValue,
                 dataIndex: 'value',
-                editor: 'textfield',
-                flex: 1,
+                editor: (readOnly ? undefined : 'textfield'),
                 menuDisabled: true,
                 sortable: false
             }],
             plugins: [{ptype: 'cellediting', clicksToEdit: 1}],
             store: store,
-            selType: 'cellmodel',
+            selType: (readOnly ? undefined : 'cellmodel'),
             xtype: 'grid'
         }];
 
+        // Apply user setting for columns (widht, flex, ...)
+        columns = me.items[0].columns;
+
+        Ext.apply(columns[0], me.colProperty);
+        Ext.apply(columns[1], me.colType);
+        Ext.apply(columns[2], me.colValue);
+
         // instantiate the base class
         me.callParent(arguments);
 
@@ -239,6 +279,10 @@ Ext.define('TrackEvents.form.field.UserData', {
 
         event.stopEvent();
 
+        if (me.readOnly) {
+            return;
+        }
+
         if (cellIndex === 0) {
 
             me.menu.getComponent('destroy').setDisabled(false);
@@ -284,6 +328,10 @@ Ext.define('TrackEvents.form.field.UserData', {
 
         event.stopEvent();
 
+        if (me.readOnly) {
+            return;
+        }
+
         // allow to add key if the store is empty
         if (me.store.getCount() === 0) {
             me.onAddProperty();