form/display edit: use the 'fit' layout to avoid width glitch

[proxmox-widget-toolkit.git] / form / DisplayEdit.js

diff --git a/form/DisplayEdit.js b/form/DisplayEdit.js
index 875f2f5250f6c493664f3e3b3bc1fa0fadcb718f..fa5b3170e4549b40cab43f434460fe2514a517aa 100644 (file)
--- a/form/DisplayEdit.js
+++ b/form/DisplayEdit.js
@@ -1,10 +1,12 @@
 Ext.define('Proxmox.form.field.DisplayEdit', {
     extend: 'Ext.form.FieldContainer',
-    alias: ['widget.pmxDisplayEditField'],
+    alias: 'widget.pmxDisplayEditField',
 
     viewModel: {
+       parent: null,
        data: {
            editable: false,
+           value: undefined,
        },
     },
 
@@ -20,7 +22,7 @@ Ext.define('Proxmox.form.field.DisplayEdit', {
        vm.set('editable', editable);
     },
 
-    layout: 'hbox',
+    layout: 'fit',
     defaults: {
        hideLabel: true
     },
@@ -30,25 +32,30 @@ Ext.define('Proxmox.form.field.DisplayEdit', {
 
        let displayConfig = {
            xtype: me.displayType,
-           bind: {
-               hidden: '{editable}',
-               disabled: '{editable}',
-           },
+           bind: {},
        };
        Ext.applyIf(displayConfig, me.initialConfig);
        delete displayConfig.editConfig;
        delete displayConfig.editable;
 
-       let editConfig = Ext.apply({}, me.editConfig); // clone, not reference!
+       let editConfig = Ext.apply({}, me.editConfig);
        Ext.applyIf(editConfig, {
            xtype: 'textfield',
-           bind: {
-               hidden: '{!editable}',
-               disabled: '{!editable}',
-           },
+           bind: {},
        });
        Ext.applyIf(editConfig, displayConfig);
 
+       Ext.applyIf(displayConfig.bind, {
+           hidden: '{editable}',
+           disabled: '{editable}',
+           value: '{value}',
+       });
+       Ext.applyIf(editConfig.bind, {
+           hidden: '{!editable}',
+           disabled: '{!editable}',
+           value: '{value}',
+       });
+
        // avoid glitch, start off correct even before viewmodel fixes it
        editConfig.disabled = editConfig.hidden = !me.editable;
        displayConfig.disabled = displayConfig.hidden = !!me.editable;
@@ -57,8 +64,8 @@ Ext.define('Proxmox.form.field.DisplayEdit', {
 
        Ext.apply(me, {
            items: [
-               displayConfig,
                editConfig,
+               displayConfig,
            ],
        });