Add the class Dbui.form.field.Property.

static/plugin_dbui/CHANGELOG

 --------------------------------- CHANGE LOG ----------------------------------
 
 HEAD
+
+0.9.8dev (Mar 2017)
    - Minor update
    - Add the method Dbui.registerExtraTypesforField and 
      Dbui.registerFieldsToJSON.
+   - Add the class Dbui.form.field.Property.
 
 0.9.7 (Dec 2016)
    - Version is non backward compatible since a new mechanism is used

static/plugin_dbui/src/Dbui.js

@@ -15,7 +15,7 @@ Ext.define('Dbui', {
      * The version of the plugin
      * @property {String}
      */
-    version: '0.9.7',
+    version: '0.9.8dev',
 
     /**
      * The name of the application
@@ -94,6 +94,7 @@ Ext.define('Dbui', {
         "htmleditor",
         "xdictfield",
         "xlistfield",
+        "xpropertyfield",
         "xtablefield"
     ],
 
@@ -110,6 +111,7 @@ Ext.define('Dbui', {
     fieldsToJSON: [
         "xdictfield",
         "xlistfield",
+        "xpropertyfield",
         "xtablefield"
     ],
 

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

@@ -24,17 +24,20 @@
  * The interface is less rich than the one of the Ext.form.field.Base.
  * It contains the basic methods getValue, setValue, reset, ...
  *
+ * For each property, decicated editor can be specified using the
+ * the configuration #sourceConfig.
+ *
  * @since 0.4.15.0
  *
  */
-Ext.define('Dbui.form.field.Dict', {
+Ext.define("Dbui.form.field.Dict", {
 
-    extend: 'Ext.form.FieldContainer',
+    extend: "Dbui.form.field.Property",
     mixins: {
-        field: 'Ext.form.field.Field'
+        field: "Ext.form.field.Field"
     },
-    alias: 'widget.xdictfield',
-    uses: ['Ext.grid.property.Grid', 'Ext.menu.Menu'],
+    alias: "widget.xdictfield",
+    uses: "Ext.menu.Menu",
 
     /**
      * @cfg {String[]}
@@ -42,24 +45,12 @@ Ext.define('Dbui.form.field.Dict', {
      */
     headers: null,
 
-    /**
-     * @cfg {Boolean}
-     * The columns header are hidden when true.
-     */
-    hideHeaders: false,
-
     /**
      * @cfg {Boolean}
      * Dictionary keys can be added or deleted when true.
      */
     modifyKeys: false,
 
-    /**
-     * @event change
-     * Fires when a value has changed.
-     * @param {Dbui.form.field.Dict} this This field
-     */
-
     /**
      * @event keychange
      * Fire when a key is added, modified or destroyed.
@@ -70,26 +61,19 @@ Ext.define('Dbui.form.field.Dict', {
      * @param {String} newKey
      */
 
-    // Predefined configuration options
-    layout: 'anchor',
-    defaults: {
-        anchor: '100%'
-    },
-
     // private short cuts
-    grid: null,
     menu: null,
 
     // private properties for internationalization
-    textAddMenu: 'Add',
-    textAddTitle: 'Please enter the new key',
-    textDestroyMenu: 'Delete',
-    textDestroyTitle: 'Are you sure to destroy the key',
-    textErrorKey: 'Please select a key!',
-    textErrorMsg: 'The key already exists!',
-    textErrorTitle: 'Error ...',
-    textUpdateMenu: 'Update',
-    textUpdateTitle: 'Modify the key',
+    textAddMenu: "Add",
+    textAddTitle: "Please enter the new key",
+    textDestroyMenu: "Delete",
+    textDestroyTitle: "Are you sure to destroy the key",
+    textErrorKey: "Please select a key!",
+    textErrorMsg: "The key already exists!",
+    textErrorTitle: "Error ...",
+    textUpdateMenu: "Update",
+    textUpdateTitle: "Modify the key",
 
     // jshint strict: false
 
@@ -97,28 +81,18 @@ Ext.define('Dbui.form.field.Dict', {
     initComponent: function () {
 
         var me = this,
-            columns,
-            i,
-            headerContainer,
-            source = me.value || {};
-
-        // configure the property grid embedded in the container
-        me.items = [{
-            xtype: 'propertygrid',
-            hideHeaders: me.hideHeaders,
-            source: source
-        }];
+            columns, i, headerContainer;
 
         // instantiate the base class
         me.callParent(arguments);
 
         // short cut to the grid
-        me.grid = me.child('propertygrid');
+        me.grid = me.child("propertygrid");
 
         // dedicated column headers
         if (me.headers) {
 
-            headerContainer = me.grid.getDockedItems('headercontainer')[0];
+            headerContainer = me.grid.getDockedItems("headercontainer")[0];
             columns = headerContainer.getGridColumns();
 
             for (i = 0; i < columns.length; i += 1) {
@@ -127,40 +101,34 @@ Ext.define('Dbui.form.field.Dict', {
         }
 
         // context menu
-        me.grid.on('cellcontextmenu', me.onCellContextMenu, me);
-        me.grid.on('containercontextmenu', me.onContainerContextMenu, me);
-        me.grid.on('headercontextmenu', me.onHeaderContextMenu, me);
+        me.grid.on("cellcontextmenu", me.onCellContextMenu, me);
+        me.grid.on("containercontextmenu", me.onContainerContextMenu, me);
+        me.grid.on("headercontextmenu", me.onHeaderContextMenu, me);
 
         if (me.modifyKeys) {
 
-            me.menu = Ext.create('Ext.menu.Menu', {
+            me.menu = Ext.create("Ext.menu.Menu", {
                 items: [{
                     text: me.textAddMenu,
-                    iconCls: 'xaction-create',
-                    itemId: 'add',
+                    iconCls: "xaction-create",
+                    itemId: "add",
                     handler: me.onAddKey,
                     scope: me
-                }, '-', {
+                }, "-", {
                     text: me.textUpdateMenu,
-                    iconCls: 'xaction-update',
-                    itemId: 'update',
+                    iconCls: "xaction-update",
+                    itemId: "update",
                     handler: me.onUpdateKey,
                     scope: me
-                }, '-', {
+                }, "-", {
                     text: me.textDestroyMenu,
-                    iconCls: 'xaction-destroy',
-                    itemId: 'destroy',
+                    iconCls: "xaction-destroy",
+                    itemId: "destroy",
                     handler: me.onDeleteKey,
                     scope: me
                 }]
             });
         }
-
-        // event change
-        me.grid.on('propertychange', me.onPropertyChange, me);
-
-        // initialize the mixin Field
-        me.initField();
     },
 
     // private method requests by the component model of ExtJS
@@ -168,33 +136,17 @@ Ext.define('Dbui.form.field.Dict', {
 
         var me = this;
 
-        me.grid.un('cellcontextmenu', me.onCellContextMenu, me);
-        me.grid.un('containercontextmenu', me.onContainerContextMenu, me);
-        me.grid.un('headercontextmenu', me.onHeaderContextMenu, me);
-        me.grid.un('propertychange', me.onPropertyChange, me);
+        me.grid.un("cellcontextmenu", me.onCellContextMenu, me);
+        me.grid.un("containercontextmenu", me.onContainerContextMenu, me);
+        me.grid.un("headercontextmenu", me.onHeaderContextMenu, me);
 
-        Ext.destroyMembers(me, 'grid');
-        Ext.destroyMembers(me, 'menu');
+        Ext.destroyMembers(me, "menu");
 
         me.callParent(arguments);
     },
 
     // jshint strict: true
 
-    /**
-     * Return the value of me field.
-     *
-     * @return {Object} the content of the dictionary.
-     *
-     */
-    getValue: function () {
-
-        "use strict";
-        var me = this;
-
-        return Ext.apply({}, me.grid.getSource());
-    },
-
     /**
      * Add a key to the dictionary.
      */
@@ -208,7 +160,7 @@ Ext.define('Dbui.form.field.Dict', {
         // prompt the user to get the key name
         Ext.Msg.prompt(me.textAddTitle, "", function (btn, text) {
 
-            if (btn === 'ok') {
+            if (btn === "ok") {
 
                 // check that the key is unique
                 if (source.hasOwnProperty(text)) {
@@ -219,7 +171,7 @@ Ext.define('Dbui.form.field.Dict', {
                 source[text] = null;
                 me.grid.setSource(source);
 
-                me.fireEvent('keychange', me, 'add', undefined, text);
+                me.fireEvent("keychange", me, "add", undefined, text);
             }
         }, me);
     },
@@ -245,8 +197,8 @@ Ext.define('Dbui.form.field.Dict', {
 
         if (me.modifyKeys && cellIndex === 0) {
 
-            me.menu.getComponent('destroy').setDisabled(false);
-            me.menu.getComponent('update').setDisabled(false);
+            me.menu.getComponent("destroy").setDisabled(false);
+            me.menu.getComponent("update").setDisabled(false);
 
             me.menu.showAt(event.getXY());
         }
@@ -268,8 +220,8 @@ Ext.define('Dbui.form.field.Dict', {
         event.stopEvent();
 
         if (me.modifyKeys) {
-            me.menu.getComponent('destroy').setDisabled(true);
-            me.menu.getComponent('update').setDisabled(true);
+            me.menu.getComponent("destroy").setDisabled(true);
+            me.menu.getComponent("update").setDisabled(true);
 
             me.menu.showAt(event.getXY());
         }
@@ -297,7 +249,7 @@ Ext.define('Dbui.form.field.Dict', {
         Ext.Msg.confirm(me.textDestroyTitle, prop, function (btn) {
             if (btn === "yes") {
                 me.grid.removeProperty(prop);
-                me.fireEvent('keychange', me, 'destroy', prop, undefined);
+                me.fireEvent("keychange", me, "destroy", prop, undefined);
             }
         }, me);
     },
@@ -321,23 +273,11 @@ Ext.define('Dbui.form.field.Dict', {
         event.stopEvent();
 
         // allow to add key if source is not defined
-        if (me.modifyKeys && isSourceEmpty && column.getItemId() === 'name') {
+        if (me.modifyKeys && isSourceEmpty && column.getItemId() === "name") {
             me.onAddKey();
         }
     },
 
-    /**
-     * Grid proeprty has change
-     * Trigger the change event
-     */
-    onPropertyChange: function () {
-
-        "use strict";
-        var me = this;
-
-        me.fireEvent('change', me);
-    },
-
     /**
      * Update a key.
      */
@@ -354,7 +294,7 @@ Ext.define('Dbui.form.field.Dict', {
         // prompt the user to modify the key
         Ext.Msg.prompt(me.textUpdateTitle, "", function (btn, text) {
 
-            if (btn === 'ok') {
+            if (btn === "ok") {
 
                 // check that the key is unique
                 if (source.hasOwnProperty(text)) {
@@ -366,31 +306,8 @@ Ext.define('Dbui.form.field.Dict', {
                 source[text] = value;
                 me.grid.setSource(source);
 
-                me.fireEvent('keychange', me, 'update', key, text);
+                me.fireEvent("keychange", me, "update", key, text);
             }
         }, me, false, key);
-
-    },
-
-    /**
-     * Set the value for the dictionary.
-     * Load the default dictionary when the value is null.
-     *
-     * @param {Object} value
-     * A key, value object which is loaded in the configuration grid.
-     *
-     */
-    setValue: function (value) {
-
-        "use strict";
-
-        var me = this,
-            source = value || me.originalValue;
-
-        me.grid.setSource(source);
-
-        // the standard way to set the value for a field
-        // extract from Ext.form.field.Base
-        return me.mixins.field.setValue.call(me, source);
     }
 });
\ No newline at end of file

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

+/**
+ * Form field encapsulating an {@link Ext.grid.property.Property}.
+ *
+ * It is a basic widget which can be used to interact with a json field
+ * containing a dictionary.
+ *
+ * It is possible to configure the editor assoiated to each (key, pair) value
+ * via the configuration parameter sourceConfig.
+ *
+ * @since 0.9.8
+ *
+ */
+Ext.define("Dbui.form.field.Property", {
+
+    extend: "Ext.form.FieldContainer",
+    mixins: {
+        field: "Ext.form.field.Field"
+    },
+    alias: "widget.xpropertyfield",
+    uses: "Ext.grid.property.Grid",
+
+    /**
+     * @cfg {Boolean}
+     * The columns header of the property grid are hidden when true.
+     */
+    hideHeaders: false,
+
+    /**
+     * @cfg {Object} sourceConfig
+     * This option allows various configurations to be set for each field
+     * in the property grid. None of these configurations are required.
+     *
+     * For more details {@link Ext.grid.property.Property#sourceConfig}
+     *
+     */
+
+    /**
+     * @event change
+     * Fires when a value has changed.
+     * @param {Dbui.form.field.Property} this field
+     */
+
+    // Predefined configuration options
+    layout: "anchor",
+    defaults: {
+        anchor: "100%"
+    },
+
+    // private short cuts
+    grid: null,
+
+    // jshint strict: false
+
+    // private method requests by the component model of ExtJS
+    initComponent: function () {
+
+        var me = this,
+            source = me.value || {};
+
+        // configure the property grid embedded in the container
+        me.items = [{
+            xtype: "propertygrid",
+            hideHeaders: me.hideHeaders,
+            source: source,
+            sourceConfig: me.sourceConfig
+        }];
+
+        // instantiate the base class
+        me.callParent(arguments);
+
+        // short cut to the grid
+        me.grid = me.child("propertygrid");
+
+        // event change
+        me.grid.on("propertychange", me.onPropertyChange, me);
+
+        // initialize the mixin Field
+        me.initField();
+    },
+
+    // private method requests by the component model of ExtJS
+    beforeDestroy: function () {
+
+        var me = this;
+
+        me.grid.un("propertychange", me.onPropertyChange, me);
+        Ext.destroyMembers(me, "grid");
+
+        me.callParent(arguments);
+    },
+
+    // jshint strict: true
+
+    /**
+     * Return the value of me field.
+     *
+     * @return {Object} the content of the dictionary.
+     *
+     */
+    getValue: function () {
+
+        "use strict";
+        var me = this;
+
+        return Ext.apply({}, me.grid.getSource());
+    },
+
+    /**
+     * Grid property has change
+     * Trigger the change event
+     */
+    onPropertyChange: function () {
+
+        "use strict";
+        var me = this;
+
+        me.fireEvent("change", me);
+    },
+
+    /**
+     * Set the value for the dictionary.
+     * Load the default dictionary when the value is null.
+     *
+     * @param {Object} value
+     * A key, value object which is loaded in the configuration grid.
+     *
+     */
+    setValue: function (value) {
+
+        "use strict";