Polish the form field dict and DictMultiDefault.

static/plugin_dbui/src/form/Panel.js

@@ -31,6 +31,7 @@ Ext.define('App.form.Panel', {
         'App.form.field.ComboBoxSlave',
         'App.form.field.ComboBoxUserReset',
         'App.form.field.Dict',
+        'App.form.field.DictMultiDefault',
         'App.form.field.List',
         'Ext.form.field.Date',
         'Ext.form.field.HtmlEditor'

static/plugin_dbui/src/form/field/Dict.js

@@ -74,6 +74,19 @@ Ext.define('App.form.field.Dict', {
             i,
             headerContainer;
 
+        this.addEvents(
+            /**
+             * @event keychange
+             * Fire when a key is added, modified or destroyed.
+             *
+             * @param {object} this
+             * @param {String} action
+             * @param {String} oldKey
+             * @param {String} newKey
+             */
+            'keychange'
+        );
+
         // property grid
         this.grid = Ext.create('Ext.grid.property.Grid', {
             hideHeaders: this.hideHeaders,
@@ -169,6 +182,7 @@ Ext.define('App.form.field.Dict', {
                 }
                 // add the new key
                 this.grid.setProperty(text, null, true);
+                this.fireEvent('keychange', this, 'add', undefined, text);
             }
         }, this);
     },
@@ -235,6 +249,7 @@ Ext.define('App.form.field.Dict', {
         Ext.Msg.confirm(this.textDestroyTitle, prop, function (btn) {
             if (btn === "yes") {
                 this.grid.removeProperty(prop);
+                this.fireEvent('keychange', this, 'destroy', prop, undefined);
             }
         }, this);
     },
@@ -309,6 +324,7 @@ Ext.define('App.form.field.Dict', {
                 // update the key
                 this.grid.removeProperty(key);
                 this.grid.setProperty(text, value, true);
+                this.fireEvent('keychange', this, 'update', key, text);
             }
         }, this, false, key);
 
@@ -316,10 +332,10 @@ Ext.define('App.form.field.Dict', {
 
     /**
      * Set the value for the dictionary.
-     * Loadd the default dictionary when the value is null.
+     * Load the default dictionary when the value is null.
      *
      * @param {Object} value
-     * A key, value object which is loaded in the dictioanry.
+     * A key, value object which is loaded in the configuration grid.
      *
      */
     setValue: function (value) {

static/plugin_dbui/src/form/field/DictMultiDefault.js

@@ -4,6 +4,7 @@
  * This field is linked to a ComboBox field. The value selected
  * in this comboBox define the default dictionary which has to be used.
  *
+ * @experimental
  * @since 0.6.2
  *
  */
@@ -29,6 +30,10 @@ Ext.define('App.form.field.DictMultiDefault', {
      * The itemId of the comboBox.
      */
 
+    // private attributes
+    combo: null,
+    lastKey: undefined,
+
     // private method requests by the component model of ExtJS
     initComponent: function () {
 
@@ -51,7 +56,7 @@ Ext.define('App.form.field.DictMultiDefault', {
         var me = this;
 
         me.un('afterrender', me.bindToComboBox, me);
-        me.getComboBox().un('select', me.onComboBoxSelect, me);
+        me.combo.un('select', me.onComboBoxSelect, me);
 
         me.callParent(arguments);
     },
@@ -65,36 +70,69 @@ Ext.define('App.form.field.DictMultiDefault', {
         "use strict";
         var me = this;
 
-        me.getComboBox().on('select', me.onComboBoxSelect, me);
+        me.combo = me.up('xform, form').down('#' + me.comboBoxItemId);
+        me.combo.on('select', me.onComboBoxSelect, me);
     },
 
     //
-    // @return {App.form.field.ComboBox}
+    // Handle the ComboBox select event
+    //
+    // @param {Ext.form.field.ComboBox} combo
+    // @param {Ext.data.Model[]} records
+    // @param {Object} eOpts
     //
-    getComboBox: function () {
+    onComboBoxSelect: function (combo, records, eOpts) {
 
         "use strict";
         var me = this;
 
-        return me.up('xform, form').down('#' + me.comboBoxItemId);
+        me.dictCfg = records.length ? records[0].get(me.dictField) : null;
+
+        // load the current value if the key is back to the original one
+        if (combo.getValue() === me.lastKey) {
+            me.grid.setSource(me.value);
+
+        // load default value
+        } else {
+            me.grid.setSource(me.dictCfg);
+        }
     },
 
     //
-    // Handle the ComboBox select event
+    // Override App.form.field.Dict to store the lastKey.
+    // The lastKey is the value of the ComboBox when setting
+    // the value of the DictMultiDefault.
+    // It is used to reload the original value when changing
+    // the key.
     //
-    // @param {Ext.form.field.ComboBox} combo
-    // @param {Ext.data.Model[]} records
-    // @param {Object} eOpts
+    // NOTE: this method is called before the rendering.
+    // Therefore the ComboBox is linked here.
     //
-    onComboBoxSelect: function (combo, records, eOpts) {
+    // @param {Object} value
+    //
+    // @return {App.form.field.DictMultiDefault}
+    //
+    setValue: function (value) {
 
-        "use strict";
         var me = this;
 
-        me.dictCfg = records.length ? records[0].get(me.dictField) : {};
+        // link me to the ComboBox
+        if (value && !me.combo) {
+            if (!me.combo) {
+                me.combo = me.up('xform, form').down('#' + me.comboBoxItemId);
+            }
+        }
+
+        // keep track of the value load in the ComboBox
+        // replace empty string by empty dictionary
+        if (me.combo) {
+            me.lastKey = me.combo.getValue();
+
+            if (!value) {
+                value = {};
+            }
+        }
 
-        // load the dictionary with the default values
-        // current content is destroyed
-        me.setValue({});
+        return me.callParent([value]);
     }
 });
\ No newline at end of file

static/scripts/dict.js

@@ -43,7 +43,14 @@ Ext.onReady(function(){
                 "Description": "A test string"
             },
             hideHeader: false,
-            modifyKeys: true
+            modifyKeys: true,
+            listeners: {
+                keychange: {
+                    fn: function (cmp, action, oldKey, newKey) {
+                        Ext.Msg.alert('Event', action + ' ' + oldKey + ' ' + newKey);
+                    }
+                }
+            }
         }],
         renderTo: Ext.getBody()
     });