diff --git a/Makefile b/Makefile
index 703b570..a729b95 100644
--- 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
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);
+    },
+
+});