form: add Proxmox.form.field.DisplayEdit

This allows to write our often used:

> {
>     xtype: me.isCreate ? 'someEditableField' : 'displayfield',
>     ...
> }

In a more schematic way, as it can now be controlled by either our
CBind mixin or ExtJS native data binding.

Use a Field container to add both, they editable and they display,
variants of a form field. As default use "textfield" for the editable
and "displayfield" xtype for the read only one.

Pass all but the editConfig and editable members of our initial
config to the display field, allow further to configure the editable
field with an editConfig object, which overwrites the config
properties inherited from the displayConfig/parent config.

This gives full control while not enforcing to specify anything extra
for most default cases.

Enforce initial state of the fields even if the databinding would
handle it to avoid glitches after first render for simple boolean expression
cases.

> {
>     xtype: 'pmxDisplayEditField',
>     cbind: {
>         editable: '{isCreate}',
>     },
>     name: 'tokenid',
>     fieldLabel: gettext('Token ID'),
>     value: me.tokenid,
>     allowBlank: false,
> }

Here, cbind could also be a bind or a native boolean expression.

For something else than a texfield one would use the editConfig, e.g.:
> {
>     ....
>     editConfig: {
>         xtype: 'pveUserSelector',
>         allowBlank: false,
>     },
> },

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/Makefile b/Makefile
index 703b57093ab5ab18f9a69f4f9b558f75e3bbbf78..a729b95d32c00fa40587b1f5d1e8716d3901aedd 100644 (file)
--- a/Makefile
+++ b/Makefile
@@ -15,6 +15,7 @@ JSSRC=                                        \
        data/ObjectStore.js             \
        data/RRDStore.js                \
        data/TimezoneStore.js           \
+       form/DisplayEdit.js             \
        form/ExpireDate.js              \
        form/IntegerField.js            \
        form/TextField.js               \

diff --git a/form/DisplayEdit.js b/form/DisplayEdit.js
new file mode 100644 (file)
index 0000000..bc932fb
--- /dev/null
+++ b/form/DisplayEdit.js
@@ -0,0 +1,72 @@
+Ext.define('Proxmox.form.field.DisplayEdit', {
+    extend: 'Ext.form.FieldContainer',
+    alias: ['widget.pmxDisplayEditField'],
+
+    viewModel: {
+       data: {
+           editable: false,
+       },
+    },
+
+    displayType: 'displayfield',
+
+    editConfig: {},
+    editable: false,
+    setEditable: function(editable) {
+       let me = this;
+       let vm = me.getViewModel();
+
+       me.editable = editable;
+       vm.set('editable', editable);
+    },
+
+    layout: 'hbox',
+    defaults: {
+       hideLabel: true
+    },
+
+    //setValue: me.callParent();
+
+    initComponent: function() {
+       let me = this;
+
+       let displayConfig = {
+           xtype: me.displayType,
+           bind: {
+               hidden: '{editable}',
+               disabled: '{editable}',
+           },
+       };
+       Ext.applyIf(displayConfig, me.initialConfig);
+       delete displayConfig.editConfig;
+       delete displayConfig.editable;
+
+       let editConfig = Ext.apply({}, me.editConfig); // clone, not reference!
+       Ext.applyIf(editConfig, {
+           xtype: 'textfield',
+           bind: {
+               hidden: '{!editable}',
+               disabled: '{!editable}',
+           },
+       });
+       Ext.applyIf(editConfig, displayConfig);
+
+       // avoid glitch, start off correct even before viewmodel fixes it
+       editConfig.disabled = editConfig.hidden = !me.editable;
+       displayConfig.disabled = displayConfig.hidden = !!me.editable;
+
+       editConfig.name = displayConfig.name = me.name;
+
+       Ext.apply(me, {
+           items: [
+               displayConfig,
+               editConfig,
+           ],
+       });
+
+       me.callParent();
+
+       me.getViewModel().set('editable', me.editable);
+    },
+
+});