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>

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		\

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);
+    },
+
+});