ui: storage: LVM panel: modernize & cleanup code

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>
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/www/manager6/storage/LVMEdit.js b/www/manager6/storage/LVMEdit.js
index 84ee198da2293fb7627c89047bf57136440ea893..1b6edd08ed0424bdbcc6a1c3d27ff0204e1de899 100644 (file)
--- 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'),
+       },
+    ],
 });