Commit 1dbcbe20 authored by LE GAC Renaud's avatar LE GAC Renaud
Browse files

Add the class Dbui.form.field.Property.

parent a4ec4c15
--------------------------------- CHANGE LOG ---------------------------------- --------------------------------- CHANGE LOG ----------------------------------
HEAD HEAD
0.9.8dev (Mar 2017)
- Minor update - Minor update
- Add the method Dbui.registerExtraTypesforField and - Add the method Dbui.registerExtraTypesforField and
Dbui.registerFieldsToJSON. Dbui.registerFieldsToJSON.
- Add the class Dbui.form.field.Property.
0.9.7 (Dec 2016) 0.9.7 (Dec 2016)
- Version is non backward compatible since a new mechanism is used - Version is non backward compatible since a new mechanism is used
......
...@@ -15,7 +15,7 @@ Ext.define('Dbui', { ...@@ -15,7 +15,7 @@ Ext.define('Dbui', {
* The version of the plugin * The version of the plugin
* @property {String} * @property {String}
*/ */
version: '0.9.7', version: '0.9.8dev',
/** /**
* The name of the application * The name of the application
...@@ -94,6 +94,7 @@ Ext.define('Dbui', { ...@@ -94,6 +94,7 @@ Ext.define('Dbui', {
"htmleditor", "htmleditor",
"xdictfield", "xdictfield",
"xlistfield", "xlistfield",
"xpropertyfield",
"xtablefield" "xtablefield"
], ],
...@@ -110,6 +111,7 @@ Ext.define('Dbui', { ...@@ -110,6 +111,7 @@ Ext.define('Dbui', {
fieldsToJSON: [ fieldsToJSON: [
"xdictfield", "xdictfield",
"xlistfield", "xlistfield",
"xpropertyfield",
"xtablefield" "xtablefield"
], ],
......
...@@ -24,17 +24,20 @@ ...@@ -24,17 +24,20 @@
* The interface is less rich than the one of the Ext.form.field.Base. * The interface is less rich than the one of the Ext.form.field.Base.
* It contains the basic methods getValue, setValue, reset, ... * 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 * @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: { mixins: {
field: 'Ext.form.field.Field' field: "Ext.form.field.Field"
}, },
alias: 'widget.xdictfield', alias: "widget.xdictfield",
uses: ['Ext.grid.property.Grid', 'Ext.menu.Menu'], uses: "Ext.menu.Menu",
/** /**
* @cfg {String[]} * @cfg {String[]}
...@@ -42,24 +45,12 @@ Ext.define('Dbui.form.field.Dict', { ...@@ -42,24 +45,12 @@ Ext.define('Dbui.form.field.Dict', {
*/ */
headers: null, headers: null,
/**
* @cfg {Boolean}
* The columns header are hidden when true.
*/
hideHeaders: false,
/** /**
* @cfg {Boolean} * @cfg {Boolean}
* Dictionary keys can be added or deleted when true. * Dictionary keys can be added or deleted when true.
*/ */
modifyKeys: false, modifyKeys: false,
/**
* @event change
* Fires when a value has changed.
* @param {Dbui.form.field.Dict} this This field
*/
/** /**
* @event keychange * @event keychange
* Fire when a key is added, modified or destroyed. * Fire when a key is added, modified or destroyed.
...@@ -70,26 +61,19 @@ Ext.define('Dbui.form.field.Dict', { ...@@ -70,26 +61,19 @@ Ext.define('Dbui.form.field.Dict', {
* @param {String} newKey * @param {String} newKey
*/ */
// Predefined configuration options
layout: 'anchor',
defaults: {
anchor: '100%'
},
// private short cuts // private short cuts
grid: null,
menu: null, menu: null,
// private properties for internationalization // private properties for internationalization
textAddMenu: 'Add', textAddMenu: "Add",
textAddTitle: 'Please enter the new key', textAddTitle: "Please enter the new key",
textDestroyMenu: 'Delete', textDestroyMenu: "Delete",
textDestroyTitle: 'Are you sure to destroy the key', textDestroyTitle: "Are you sure to destroy the key",
textErrorKey: 'Please select a key!', textErrorKey: "Please select a key!",
textErrorMsg: 'The key already exists!', textErrorMsg: "The key already exists!",
textErrorTitle: 'Error ...', textErrorTitle: "Error ...",
textUpdateMenu: 'Update', textUpdateMenu: "Update",
textUpdateTitle: 'Modify the key', textUpdateTitle: "Modify the key",
// jshint strict: false // jshint strict: false
...@@ -97,28 +81,18 @@ Ext.define('Dbui.form.field.Dict', { ...@@ -97,28 +81,18 @@ Ext.define('Dbui.form.field.Dict', {
initComponent: function () { initComponent: function () {
var me = this, var me = this,
columns, columns, i, headerContainer;
i,
headerContainer,
source = me.value || {};
// configure the property grid embedded in the container
me.items = [{
xtype: 'propertygrid',
hideHeaders: me.hideHeaders,
source: source
}];
// instantiate the base class // instantiate the base class
me.callParent(arguments); me.callParent(arguments);
// short cut to the grid // short cut to the grid
me.grid = me.child('propertygrid'); me.grid = me.child("propertygrid");
// dedicated column headers // dedicated column headers
if (me.headers) { if (me.headers) {
headerContainer = me.grid.getDockedItems('headercontainer')[0]; headerContainer = me.grid.getDockedItems("headercontainer")[0];
columns = headerContainer.getGridColumns(); columns = headerContainer.getGridColumns();
for (i = 0; i < columns.length; i += 1) { for (i = 0; i < columns.length; i += 1) {
...@@ -127,40 +101,34 @@ Ext.define('Dbui.form.field.Dict', { ...@@ -127,40 +101,34 @@ Ext.define('Dbui.form.field.Dict', {
} }
// context menu // context menu
me.grid.on('cellcontextmenu', me.onCellContextMenu, me); me.grid.on("cellcontextmenu", me.onCellContextMenu, me);
me.grid.on('containercontextmenu', me.onContainerContextMenu, me); me.grid.on("containercontextmenu", me.onContainerContextMenu, me);
me.grid.on('headercontextmenu', me.onHeaderContextMenu, me); me.grid.on("headercontextmenu", me.onHeaderContextMenu, me);
if (me.modifyKeys) { if (me.modifyKeys) {
me.menu = Ext.create('Ext.menu.Menu', { me.menu = Ext.create("Ext.menu.Menu", {
items: [{ items: [{
text: me.textAddMenu, text: me.textAddMenu,
iconCls: 'xaction-create', iconCls: "xaction-create",
itemId: 'add', itemId: "add",
handler: me.onAddKey, handler: me.onAddKey,
scope: me scope: me
}, '-', { }, "-", {
text: me.textUpdateMenu, text: me.textUpdateMenu,
iconCls: 'xaction-update', iconCls: "xaction-update",
itemId: 'update', itemId: "update",
handler: me.onUpdateKey, handler: me.onUpdateKey,
scope: me scope: me
}, '-', { }, "-", {
text: me.textDestroyMenu, text: me.textDestroyMenu,
iconCls: 'xaction-destroy', iconCls: "xaction-destroy",
itemId: 'destroy', itemId: "destroy",
handler: me.onDeleteKey, handler: me.onDeleteKey,
scope: me 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 // private method requests by the component model of ExtJS
...@@ -168,33 +136,17 @@ Ext.define('Dbui.form.field.Dict', { ...@@ -168,33 +136,17 @@ Ext.define('Dbui.form.field.Dict', {
var me = this; var me = this;
me.grid.un('cellcontextmenu', me.onCellContextMenu, me); me.grid.un("cellcontextmenu", me.onCellContextMenu, me);
me.grid.un('containercontextmenu', me.onContainerContextMenu, me); me.grid.un("containercontextmenu", me.onContainerContextMenu, me);
me.grid.un('headercontextmenu', me.onHeaderContextMenu, me); me.grid.un("headercontextmenu", me.onHeaderContextMenu, me);
me.grid.un('propertychange', me.onPropertyChange, me);
Ext.destroyMembers(me, 'grid'); Ext.destroyMembers(me, "menu");
Ext.destroyMembers(me, 'menu');
me.callParent(arguments); me.callParent(arguments);
}, },
// jshint strict: true // 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. * Add a key to the dictionary.
*/ */
...@@ -208,7 +160,7 @@ Ext.define('Dbui.form.field.Dict', { ...@@ -208,7 +160,7 @@ Ext.define('Dbui.form.field.Dict', {
// prompt the user to get the key name // prompt the user to get the key name
Ext.Msg.prompt(me.textAddTitle, "", function (btn, text) { Ext.Msg.prompt(me.textAddTitle, "", function (btn, text) {
if (btn === 'ok') { if (btn === "ok") {
// check that the key is unique // check that the key is unique
if (source.hasOwnProperty(text)) { if (source.hasOwnProperty(text)) {
...@@ -219,7 +171,7 @@ Ext.define('Dbui.form.field.Dict', { ...@@ -219,7 +171,7 @@ Ext.define('Dbui.form.field.Dict', {
source[text] = null; source[text] = null;
me.grid.setSource(source); me.grid.setSource(source);
me.fireEvent('keychange', me, 'add', undefined, text); me.fireEvent("keychange", me, "add", undefined, text);
} }
}, me); }, me);
}, },
...@@ -245,8 +197,8 @@ Ext.define('Dbui.form.field.Dict', { ...@@ -245,8 +197,8 @@ Ext.define('Dbui.form.field.Dict', {
if (me.modifyKeys && cellIndex === 0) { if (me.modifyKeys && cellIndex === 0) {
me.menu.getComponent('destroy').setDisabled(false); me.menu.getComponent("destroy").setDisabled(false);
me.menu.getComponent('update').setDisabled(false); me.menu.getComponent("update").setDisabled(false);
me.menu.showAt(event.getXY()); me.menu.showAt(event.getXY());
} }
...@@ -268,8 +220,8 @@ Ext.define('Dbui.form.field.Dict', { ...@@ -268,8 +220,8 @@ Ext.define('Dbui.form.field.Dict', {
event.stopEvent(); event.stopEvent();
if (me.modifyKeys) { if (me.modifyKeys) {
me.menu.getComponent('destroy').setDisabled(true); me.menu.getComponent("destroy").setDisabled(true);
me.menu.getComponent('update').setDisabled(true); me.menu.getComponent("update").setDisabled(true);
me.menu.showAt(event.getXY()); me.menu.showAt(event.getXY());
} }
...@@ -297,7 +249,7 @@ Ext.define('Dbui.form.field.Dict', { ...@@ -297,7 +249,7 @@ Ext.define('Dbui.form.field.Dict', {
Ext.Msg.confirm(me.textDestroyTitle, prop, function (btn) { Ext.Msg.confirm(me.textDestroyTitle, prop, function (btn) {
if (btn === "yes") { if (btn === "yes") {
me.grid.removeProperty(prop); me.grid.removeProperty(prop);
me.fireEvent('keychange', me, 'destroy', prop, undefined); me.fireEvent("keychange", me, "destroy", prop, undefined);
} }
}, me); }, me);
}, },
...@@ -321,23 +273,11 @@ Ext.define('Dbui.form.field.Dict', { ...@@ -321,23 +273,11 @@ Ext.define('Dbui.form.field.Dict', {
event.stopEvent(); event.stopEvent();
// allow to add key if source is not defined // 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(); me.onAddKey();
} }
}, },
/**
* Grid proeprty has change
* Trigger the change event
*/
onPropertyChange: function () {
"use strict";
var me = this;
me.fireEvent('change', me);
},
/** /**
* Update a key. * Update a key.
*/ */
...@@ -354,7 +294,7 @@ Ext.define('Dbui.form.field.Dict', { ...@@ -354,7 +294,7 @@ Ext.define('Dbui.form.field.Dict', {
// prompt the user to modify the key // prompt the user to modify the key
Ext.Msg.prompt(me.textUpdateTitle, "", function (btn, text) { Ext.Msg.prompt(me.textUpdateTitle, "", function (btn, text) {
if (btn === 'ok') { if (btn === "ok") {
// check that the key is unique // check that the key is unique
if (source.hasOwnProperty(text)) { if (source.hasOwnProperty(text)) {
...@@ -366,31 +306,8 @@ Ext.define('Dbui.form.field.Dict', { ...@@ -366,31 +306,8 @@ Ext.define('Dbui.form.field.Dict', {
source[text] = value; source[text] = value;
me.grid.setSource(source); me.grid.setSource(source);
me.fireEvent('keychange', me, 'update', key, text); me.fireEvent("keychange", me, "update", key, text);
} }
}, me, false, key); }, 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
/**
* 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";