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>

diff --git a/www/manager6/storage/LvmThinEdit.js b/www/manager6/storage/LvmThinEdit.js
index 0c288bb04a2b4969a86280d950850f7fde431057..ece5512b0b231745c1ebf95a69a0167fdb39b6c5 100644 (file)
--- 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: [],
 });