[pve-devel] [PATCH manager 6/6] ui: storage/LVMInputPanel: modernize & cleanup code

[Dominik Csapak <d.csapak@proxmox.com>]

using cbin, gettin rid of initComponent

this is a bit more complicated than the other refactorings in storage
recently, since we have a few fields with non trivial dependecies
between the selected mode (existing vgs/base storage) and isCreate

Because of that, using a cbind for the xtype here instead of the
pmxDisplayEditField is much more convenient
(accessing the pmxDisplayEditField and the editField below is currently
not really ideal)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/storage/LVMEdit.js | 152 ++++++++++++++++----------------
 1 file changed, 74 insertions(+), 78 deletions(-)

diff --git a/www/manager6/storage/LVMEdit.js b/www/manager6/storage/LVMEdit.js
index 84ee198da..1b6edd08e 100644
--- a/www/manager6/storage/LVMEdit.js
+++ b/www/manager6/storage/LVMEdit.js
@@ -141,78 +141,76 @@ Ext.define('PVE.storage.LunSelector', {
 
 Ext.define('PVE.storage.LVMInputPanel', {
     extend: 'PVE.panel.StorageBase',
+    mixins: ['Proxmox.Mixin.CBind'],
 
     onlineHelp: 'storage_lvm',
 
-    initComponent: function() {
-	let me = this;
-
-	me.column1 = [];
-
-	let vgnameField = Ext.createWidget(me.isCreate ? 'textfield' : 'displayfield', {
+    column1: [
+	{
+	    xtype: 'pveBaseStorageSelector',
+	    name: 'basesel',
+	    fieldLabel: gettext('Base storage'),
+	    cbind: {
+		disabled: '{!isCreate}',
+		hidden: '{!isCreate}',
+	    },
+	    submitValue: false,
+	    listeners: {
+		change: function(f, value) {
+		    let me = this;
+		    let vgField = me.up('inputpanel').lookup('volumeGroupSelector');
+		    let vgNameField = me.up('inputpanel').lookup('vgName');
+		    let baseField = me.up('inputpanel').lookup('lunSelector');
+
+		    vgField.setVisible(!value);
+		    vgField.setDisabled(!!value);
+
+		    baseField.setVisible(!!value);
+		    baseField.setDisabled(!value);
+		    baseField.setStorage(value);
+
+		    vgNameField.setVisible(!!value);
+		    vgNameField.setDisabled(!value);
+		},
+	    },
+	},
+	{
+	    xtype: 'pveStorageLunSelector',
+	    name: 'base',
+	    fieldLabel: gettext('Base volume'),
+	    reference: 'lunSelector',
+	    hidden: true,
+	    disabled: true,
+	},
+	{
+	    xtype: 'pveVgSelector',
 	    name: 'vgname',
-	    hidden: !!me.isCreate,
-	    disabled: !!me.isCreate,
-	    value: '',
 	    fieldLabel: gettext('Volume group'),
+	    reference: 'volumeGroupSelector',
+	    cbind: {
+		disabled: '{!isCreate}',
+		hidden: '{!isCreate}',
+	    },
 	    allowBlank: false,
-	});
-
-	if (me.isCreate) {
-	    let vgField = Ext.create('PVE.storage.VgSelector', {
-		name: 'vgname',
-		fieldLabel: gettext('Volume group'),
-		reference: 'volumeGroupSelector',
-		allowBlank: false,
-		listeners: {
-		    nodechanged: (value) => me.lookup('storageNodeRestriction').setValue(value),
-		}
-	    });
-
-	    let baseField = Ext.createWidget('pveStorageLunSelector', {
-		name: 'base',
-		hidden: true,
-		disabled: true,
-		fieldLabel: gettext('Base volume'),
-	    });
-
-	    me.column1.push({
-		xtype: 'pveBaseStorageSelector',
-		name: 'basesel',
-		fieldLabel: gettext('Base storage'),
-		submitValue: false,
-		listeners: {
-		    change: function(f, value) {
-			if (value) {
-			    vgnameField.setVisible(true);
-			    vgnameField.setDisabled(false);
-			    vgField.setVisible(false);
-			    vgField.setDisabled(true);
-			    baseField.setVisible(true);
-			    baseField.setDisabled(false);
-			} else {
-			    vgnameField.setVisible(false);
-			    vgnameField.setDisabled(true);
-			    vgField.setVisible(true);
-			    vgField.setDisabled(false);
-			    baseField.setVisible(false);
-			    baseField.setDisabled(true);
-			}
-			baseField.setStorage(value);
-		    },
+	    listeners: {
+		nodechanged: function(value) {
+		    this.up('inputpanel').lookup('storageNodeRestriction').setValue(value);
 		},
-	    });
-
-	    me.column1.push(baseField);
-
-	    me.column1.push(vgField);
-	}
-
-	me.column1.push(vgnameField);
-
-	// here value is an array,
-	// while before it was a string
-	me.column1.push({
+	    },
+	},
+	{
+	    name: 'vgname',
+	    fieldLabel: gettext('Volume group'),
+	    reference: 'vgName',
+	    cbind: {
+		xtype: (get) => get('isCreate') ? 'textfield' : 'displayfield',
+		hidden: '{isCreate}',
+		disabled: '{isCreate}',
+	    },
+	    value: '',
+	    allowBlank: false,
+	},
+	{
 	    xtype: 'pveContentTypeSelector',
 	    cts: ['images', 'rootdir'],
 	    fieldLabel: gettext('Content'),
@@ -220,17 +218,15 @@ Ext.define('PVE.storage.LVMInputPanel', {
 	    value: ['images', 'rootdir'],
 	    multiSelect: true,
 	    allowBlank: false,
-	});
-
-	me.column2 = [
-	    {
-		xtype: 'proxmoxcheckbox',
-		name: 'shared',
-		uncheckedValue: 0,
-		fieldLabel: gettext('Shared'),
-	    },
-	];
-
-	me.callParent();
-    },
+	},
+    ],
+
+    column2: [
+	{
+	    xtype: 'proxmoxcheckbox',
+	    name: 'shared',
+	    uncheckedValue: 0,
+	    fieldLabel: gettext('Shared'),
+	},
+    ],
 });
-- 
2.30.2