improve xtermjs settings button behaviour

we now put a form around the fields/buttons and can track
the valid/dirty state, and use this for setting the button states

now the buttons are correctly enabled/disabled when the form
is dirty/valid/empty

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

www/manager6/window/Settings.js

@@ -31,27 +31,40 @@ Ext.define('PVE.window.Settings', {
 	    me.lookupReference('savedUserName').setValue(username);
 
 	    var settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
-	    var defaultSettings = true;
 	    settings.forEach(function(setting) {
 		var val = localStorage.getItem('pve-xterm-' + setting);
 		if (val !== undefined && val !== null) {
 		    var field = me.lookup(setting);
 		    field.setValue(val);
-		    defaultSettings = false;
+		    field.resetOriginalValue();
+		}
+	    });
+	},
+
+	set_button_status: function() {
+	    var me = this;
+
+	    var form = me.lookup('xtermform');
+	    var valid = form.isValid();
+	    var dirty = form.isDirty();
+
+	    var hasvalues = false;
+	    var values = form.getValues();
+	    Ext.Object.eachValue(values, function(value) {
+		if (value) {
+		    hasvalues = true;
+		    return false;
 		}
 	    });
 
-	    me.lookup('xtermsave').setDisabled(true);
+	    me.lookup('xtermsave').setDisabled(!dirty || !valid);
-	    me.lookup('xtermreset').setDisabled(defaultSettings);
+	    me.lookup('xtermreset').setDisabled(!hasvalues);
 	},
 
 	control: {
-	    '#xtermjs field': {
+	    '#xtermjs form': {
-		change: function(field) {
+		dirtychange: 'set_button_status',
-		    var me = this;
+		validitychange: 'set_button_status'
-		    me.lookup('xtermsave').setDisabled(false);
-		    me.lookup('xtermreset').setDisabled(false);
-		}
 	    },
 	    '#xtermjs button': {
 		click: function(button) {
@@ -70,8 +83,9 @@ Ext.define('PVE.window.Settings', {
 			    field.setValue(undefined);
 			    localStorage.removeItem('pve-xterm-' + setting);
 			}
+			field.resetOriginalValue();
 		    });
-		    button.setDisabled(true);
+		    me.set_button_status();
 		}
 	    },
 	    'button[name=reset]': {
@@ -231,68 +245,73 @@ Ext.define('PVE.window.Settings', {
 	itemId: 'xtermjs',
 	width: '50%',
 	margin: '5',
-	    title: gettext('xterm.js Settings'),
+	title: gettext('xterm.js Settings'),
-	layout: {
+	items: [{
-	    type: 'vbox',
+	    xtype: 'form',
-	    algin: 'left'
+	    reference: 'xtermform',
-	},
+	    border: false,
-	defaults: {
+	    layout: {
-	    width: '100%',
+		type: 'vbox',
-	    margin: '0 0 10 0'
+		algin: 'left'
-	},
-	items: [
-	    {
-		xtype: 'textfield',
-		name: 'fontFamily',
-		reference: 'fontFamily',
-		emptyText: Proxmox.Utils.defaultText,
-		fieldLabel: gettext('Font-Family')
 	    },
-	    {
+	    defaults: {
-		xtype: 'proxmoxintegerfield',
+		width: '100%',
-		emptyText: Proxmox.Utils.defaultText,
+		margin: '0 0 10 0'
-		name: 'fontSize',
-		reference: 'fontSize',
-		minValue: 1,
-		fieldLabel: gettext('Font-Size')
 	    },
-	    {
+	    items: [
-		xtype: 'numberfield',
+		{
-		name: 'letterSpacing',
+		    xtype: 'textfield',
-		reference: 'letterSpacing',
+		    name: 'fontFamily',
-		emptyText: Proxmox.Utils.defaultText,
+		    reference: 'fontFamily',
-		fieldLabel: gettext('Letter Spacing')
+		    emptyText: Proxmox.Utils.defaultText,
-	    },
+		    fieldLabel: gettext('Font-Family')
-	    {
-		xtype: 'numberfield',
-		name: 'lineHeight',
-		minValue: 0.1,
-		reference: 'lineHeight',
-		emptyText: Proxmox.Utils.defaultText,
-		fieldLabel: gettext('Line Height')
-	    },
-	    {
-		xtype: 'container',
-		layout: {
-		    type: 'hbox',
-		    pack: 'end'
 		},
-		items: [
+		{
-		    {
+		    xtype: 'proxmoxintegerfield',
-			xtype: 'button',
+		    emptyText: Proxmox.Utils.defaultText,
-			reference: 'xtermreset',
+		    name: 'fontSize',
-			disabled: true,
+		    reference: 'fontSize',
-			text: gettext('Reset')
+		    minValue: 1,
+		    fieldLabel: gettext('Font-Size')
+		},
+		{
+		    xtype: 'numberfield',
+		    name: 'letterSpacing',
+		    reference: 'letterSpacing',
+		    emptyText: Proxmox.Utils.defaultText,
+		    fieldLabel: gettext('Letter Spacing')
+		},
+		{
+		    xtype: 'numberfield',
+		    name: 'lineHeight',
+		    minValue: 0.1,
+		    reference: 'lineHeight',
+		    emptyText: Proxmox.Utils.defaultText,
+		    fieldLabel: gettext('Line Height')
+		},
+		{
+		    xtype: 'container',
+		    layout: {
+			type: 'hbox',
+			pack: 'end'
 		    },
-		    {
+		    items: [
-			xtype: 'button',
+			{
-			reference: 'xtermsave',
+			    xtype: 'button',
-			disabled: true,
+			    reference: 'xtermreset',
-			text: gettext('Save')
+			    disabled: true,
-		    }
+			    text: gettext('Reset')
-		]
+			},
-	    }
+			{
-	]
+			    xtype: 'button',
+			    reference: 'xtermsave',
+			    disabled: true,
+			    text: gettext('Save')
+			}
+		    ]
+		}
+	    ]
+	}]
     }],
 
     onShow: function() {