From fa84bd595f8a85d69dbeeef7db5908f2e94d7d76 Mon Sep 17 00:00:00 2001
From: Dominik Csapak <d.csapak@proxmox.com>
Date: Wed, 18 Jan 2023 14:13:00 +0100
Subject: [PATCH] ui: storage: LVM-Thin panel: modernize & cleanup code

using cbind + pmxDisplayEditField, getting rid of the initComponent

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---
 www/manager6/storage/LvmThinEdit.js | 83 ++++++++++++-----------------
 1 file changed, 35 insertions(+), 48 deletions(-)

diff --git a/www/manager6/storage/LvmThinEdit.js b/www/manager6/storage/LvmThinEdit.js
index 0c288bb0..ece5512b 100644
--- a/www/manager6/storage/LvmThinEdit.js
+++ b/www/manager6/storage/LvmThinEdit.js
@@ -124,67 +124,56 @@ Ext.define('PVE.storage.BaseVGSelector', {
 
 Ext.define('PVE.storage.LvmThinInputPanel', {
     extend: 'PVE.panel.StorageBase',
+    mixins: ['Proxmox.Mixin.CBind'],
 
     onlineHelp: 'storage_lvmthin',
 
-    initComponent: function() {
-	let me = this;
-
-	me.column1 = [];
+    column1: [
+	{
+	    xtype: 'pmxDisplayEditField',
+	    cbind: {
+		editable: '{isCreate}',
+	    },
 
-	let vgnameField = Ext.createWidget(me.isCreate ? 'textfield' : 'displayfield', {
 	    name: 'vgname',
-	    hidden: !!me.isCreate,
-	    disabled: !!me.isCreate,
-	    value: '',
 	    fieldLabel: gettext('Volume group'),
-	    allowBlank: false,
-	});
 
-	let thinpoolField = Ext.createWidget(me.isCreate ? 'textfield' : 'displayfield', {
-	    name: 'thinpool',
-	    hidden: !!me.isCreate,
-	    disabled: !!me.isCreate,
-	    value: '',
-	    fieldLabel: gettext('Thin Pool'),
-	    allowBlank: false,
-	});
-
-	if (me.isCreate) {
-	    me.column1.push(Ext.create('PVE.storage.BaseVGSelector', {
-		name: 'vgname',
-		fieldLabel: gettext('Volume group'),
-		reference: 'volumeGroupSelector',
+	    editConfig: {
+		xtype: 'pveBaseVGSelector',
 		listeners: {
 		    nodechanged: function(value) {
-			me.lookup('thinPoolSelector').setNodeName(value);
-			me.lookup('storageNodeRestriction').setValue(value);
+			let panel = this.up('inputpanel');
+			panel.lookup('thinPoolSelector').setNodeName(value);
+			panel.lookup('storageNodeRestriction').setValue(value);
 		    },
 		    change: function(f, value) {
-			if (me.isCreate) {
-			    let vgField = me.lookup('thinPoolSelector');
+			let vgField = this.up('inputpanel').lookup('thinPoolSelector');
+			if (vgField) {
+			    vgField.setDisabled(!value);
 			    vgField.setVG(value);
 			    vgField.setValue('');
 			}
 		    },
 		},
-	    }));
-
-	    me.column1.push(Ext.create('PVE.storage.TPoolSelector', {
-		name: 'thinpool',
-		fieldLabel: gettext('Thin Pool'),
-		reference: 'thinPoolSelector',
-		allowBlank: false,
-	    }));
-	}
-
-	me.column1.push(vgnameField);
+	    },
+	},
+	{
+	    xtype: 'pmxDisplayEditField',
+	    cbind: {
+		editable: '{isCreate}',
+	    },
 
-	me.column1.push(thinpoolField);
+	    name: 'thinpool',
+	    fieldLabel: gettext('Thin Pool'),
+	    allowBlank: false,
 
-	// here value is an array,
-	// while before it was a string
-	me.column1.push({
+	    editConfig: {
+		xtype: 'pveTPSelector',
+		reference: 'thinPoolSelector',
+		disabled: true,
+	    },
+	},
+	{
 	    xtype: 'pveContentTypeSelector',
 	    cts: ['images', 'rootdir'],
 	    fieldLabel: gettext('Content'),
@@ -192,10 +181,8 @@ Ext.define('PVE.storage.LvmThinInputPanel', {
 	    value: ['images', 'rootdir'],
 	    multiSelect: true,
 	    allowBlank: false,
-	});
+	},
+    ],
 
-	me.column2 = [];
-
-	me.callParent();
-    },
+    column2: [],
 });
-- 
2.39.5