Use component references via lookupReference()

This allows to add the components in each column in the order they
appear in the Clone Window.
References from child components are kept in an object in the parent
component so it should be the same performance-wise (contrary to to Ext.ComponentQuery
which is doing DOM parsing)

www/manager6/qemu/Clone.js

@@ -75,14 +75,17 @@ Ext.define('PVE.window.Clone', {
     updateVisibility: function() {
 	var me = this;
 
-	var clonemode = me.cloneModeSel.getValue();
+	var storagesel = me.lookupReference('storagesel');
-	var storage = me.hdstoragesel.getValue();
+	var formatsel = me.lookupReference('formatsel');
-	var rec = me.hdstoragesel.store.getById(storage);
 
-	me.hdstoragesel.setDisabled(clonemode === 'clone');
+	var clonemode = me.lookupReference('clonemodesel').getValue();
+	var storage = storagesel.getValue();
+	var rec = storagesel.store.getById(storage);
+
+	storagesel.setDisabled(clonemode === 'clone');
 
 	if (!rec || clonemode === 'clone') {
-            me.formatsel.setDisabled(true);
+	    formatsel.setDisabled(true);
 	    return;
 	}
 
@@ -94,11 +97,11 @@ Ext.define('PVE.window.Clone', {
 		rec.data.type === 'zfs' ||
 		rec.data.type === 'zfspool'
 	) {
-            me.formatsel.setValue('raw');
+	    formatsel.setValue('raw');
-            me.formatsel.setDisabled(true);
+	    formatsel.setDisabled(true);
 	} else {
-            me.formatsel.setValue('qcow2');
+	    formatsel.setValue('qcow2');
-            me.formatsel.setDisabled(false);
+	    formatsel.setDisabled(false);
 	}
     },
 
@@ -107,8 +110,8 @@ Ext.define('PVE.window.Clone', {
     verifyFeature: function() {
 	var me = this;
 
-	var snapname = me.snapshotSel.getValue();
+	var snapname = me.lookupReference('snapshotsel').getValue();
-	var clonemode = me.cloneModeSel.getValue();
+	var clonemode = me.lookupReference('clonemodesel').getValue();
 
 	var params = { feature: clonemode };
 	if (snapname !== 'current') {
@@ -127,8 +130,8 @@ Ext.define('PVE.window.Clone', {
 	    success: function(response, options) {
 		var res = response.result.data;
 
-		me.targetSel.allowedNodes = res.nodes;
+		me.lookupReference('targetsel').allowedNodes = res.nodes;
-		me.targetSel.validate();
+		me.lookupReference('targetsel').validate();
 	    }
 	});
     },
@@ -148,61 +151,33 @@ Ext.define('PVE.window.Clone', {
 	    me.snapname = 'current';
 	}
 
+	var titletext = me.isTemplate ? "Template" : "VM";
+	me.title = "Clone " + titletext + " " + me.vmid;
+
 	var col1 = [];
 	var col2 = [];
 
-	me.targetSel = Ext.create('PVE.form.NodeSelector', {
+	col1.push({
+	    xtype: 'pveNodeSelector',
 	    name: 'target',
+	    reference: 'targetsel',
 	    fieldLabel: gettext('Target node'),
 	    selectCurNode: true,
 	    allowBlank: false,
-	    onlineValidator: true
+	    onlineValidator: true,
+	    listeners: {
+		change: function(f, value) {
+		    me.lookupReference('storagesel').setTargetNode(value);
+		}
+	    }
 	});
 
-	col1.push(me.targetSel);
-
 	var modelist = [['copy', gettext('Full Clone')]];
 	if (me.isTemplate) {
 	    modelist.push(['clone', gettext('Linked Clone')]);
 	}
 
-        me.cloneModeSel = Ext.create('PVE.form.KVComboBox', {
+	col1.push({
-            fieldLabel: gettext('Mode'),
-            name: 'clonemode',
-            allowBlank: false,
-            hidden: !me.isTemplate,
-	    value: me.isTemplate ? 'clone' : 'copy',
-            comboItems: modelist
-        });
-
-        me.mon(me.cloneModeSel, 'change', function(t, value) {
-	    me.updateVisibility();
-	    me.verifyFeature();
-        });
-
-	col2.push(me.cloneModeSel);
-
-	me.snapshotSel = Ext.create('PVE.form.SnapshotSelector', {
-	    name: 'snapname',
-	    fieldLabel: gettext('Snapshot'),
-            nodename: me.nodename,
-            vmid: me.vmid,
-	    hidden: me.isTemplate || !me.hasSnapshots ? true : false,
-            disabled: false,
-	    allowBlank: false,
-	    value : me.snapname,
-	    listeners: {
-		change: function(f, value) {
-		// current selected snaphshot has maybe local disks
-		    me.verifyFeature();
-		}
-	    }
-	});
-
-	col2.push(me.snapshotSel);
-
-	col1.push(
-	    {
 	    xtype: 'pveGuestIDSelector',
 	    name: 'newvmid',
 	    guestType: 'qemu',
@@ -225,12 +200,47 @@ Ext.define('PVE.window.Clone', {
 	}
 	);
 
-        me.hdstoragesel = Ext.create('PVE.form.StorageSelector', {
+	col2.push({
+	    xtype: 'pveKVComboBox',
+	    fieldLabel: gettext('Mode'),
+	    name: 'clonemode',
+	    reference: 'clonemodesel',
+	    allowBlank: false,
+	    hidden: !me.isTemplate,
+	    value: me.isTemplate ? 'clone' : 'copy',
+		    comboItems: modelist,
+		    listeners: {
+			change: function(t, value) {
+			    me.updateVisibility();
+			    me.verifyFeature();
+			}
+		    }
+	},
+	{
+	    xtype: 'PVE.form.SnapshotSelector',
+	    name: 'snapname',
+	    reference: 'snapshotsel',
+	    fieldLabel: gettext('Snapshot'),
+	    nodename: me.nodename,
+	    vmid: me.vmid,
+	    hidden: me.isTemplate || !me.hasSnapshots ? true : false,
+	    disabled: false,
+	    allowBlank: false,
+	    value : me.snapname,
+	    listeners: {
+		change: function(f, value) {
+		    me.verifyFeature();
+		}
+	    }
+	},
+	{
+	    xtype: 'pveStorageSelector',
 	    name: 'storage',
+	    reference: 'storagesel',
 	    nodename: me.nodename,
 	    fieldLabel: gettext('Target Storage'),
 	    storageContent: 'images',
-                autoSelect: me.insideWizard,
+	    autoSelect: true,
 	    allowBlank: true,
 	    disabled: me.isTemplate ? true : false, // because default mode is clone for templates
 		    hidden: false,
@@ -239,15 +249,11 @@ Ext.define('PVE.window.Clone', {
 			    me.updateVisibility();
 			}
 		    }
-
+	},
-	});
+	{
-
+	    xtype: 'pveDiskFormatSelector',
-	me.targetSel.on('change', function(f, value) {
-	    me.hdstoragesel.setTargetNode(value);
-	});
-
-	me.formatsel = Ext.create('PVE.form.DiskFormatSelector', {
 	    name: 'diskformat',
+	    reference: 'formatsel',
 	    fieldLabel: gettext('Format'),
 	    value: 'raw',
 	    disabled: true,
@@ -255,10 +261,7 @@ Ext.define('PVE.window.Clone', {
 	    allowBlank: false
 	});
 
-	col2.push(me.hdstoragesel);
+	var formPanel = Ext.create('Ext.form.Panel', {
-	col2.push(me.formatsel);
-
-	me.formPanel = Ext.create('Ext.form.Panel', {
 	    bodyPadding: 10,
 	    reference: 'cloneform',
 	    border: false,
@@ -285,36 +288,31 @@ Ext.define('PVE.window.Clone', {
 	    ]
 	});
 
-	var form = me.formPanel.getForm();
-
-	var titletext = me.isTemplate ? "Template" : "VM";
-	me.title = "Clone " + titletext + " " + me.vmid;
-	
-	me.submitBtn = Ext.create('Ext.Button', {
-	    reference: 'submitBtn',
-	    text: gettext('Clone'),
-	    disabled: true,
-	    handler: function() {
-		if (form.isValid()) {
-		    var values = form.getValues();
-		    me.create_clone(values);
-		}
-	    }
-	});
-
-	var helpButton = Ext.create('PVE.button.Help', {
-	    listenToGlobalEvent: false,
-	    hidden: false,
-	    onlineHelp: me.onlineHelp});
-
 	Ext.apply(me, {
 	    modal: true,
 	    width: 600,
 	    height: 250,
 	    border: false,
 	    layout: 'fit',
-	    buttons: [ helpButton, '->', me.submitBtn ],
+	    buttons: [ {
-	    items: [ me.formPanel ]
+		xtype: 'pveHelpButton',
+		listenToGlobalEvent: false,
+		hidden: false,
+		onlineHelp: me.onlineHelp
+	    },
+	    '->',
+	    {
+		reference: 'submitBtn',
+		text: gettext('Clone'),
+		disabled: true,
+		handler: function() {
+		    var cloneForm = me.lookupReference('cloneform');
+		    if (cloneForm.isValid()) {
+			me.create_clone(cloneForm.getValues());
+		    }
+		}
+	    } ],
+	    items: [ formPanel ]
 	});
 
 	me.callParent();