[pve-devel] [PATCH manager 4/5] qemu/wizard: move to declarative syntax

[Thomas Lamprecht]

Use a ViewModel directly, instead of emulating its behaviour with a
ViewController.

The rest consists mostly of indentation changes, moving some
components directly inside their parent declaration.

Signed-off-by: Thomas Lamprecht <t.lamprecht at proxmox.com>
---
 www/manager6/qemu/CreateWizard.js | 337 +++++++++++++++++++-------------------
 1 file changed, 168 insertions(+), 169 deletions(-)

diff --git a/www/manager6/qemu/CreateWizard.js b/www/manager6/qemu/CreateWizard.js
index cc478f03..f425a49f 100644
--- a/www/manager6/qemu/CreateWizard.js
+++ b/www/manager6/qemu/CreateWizard.js
@@ -1,191 +1,190 @@
+/*jslint confusion: true*/
 Ext.define('PVE.qemu.CreateWizard', {
     extend: 'PVE.window.Wizard',
     alias: 'widget.pveQemuCreateWizard',
+    mixins: ['Proxmox.Mixin.CBind'],
 
-    controller: {
-
-	xclass: 'Ext.app.ViewController',
-
-	control: {
-	    'field[name=nodename]': {
-		change: function(f, value) {
-		    var me = this;
-		    ['networkpanel', 'hdpanel', 'cdpanel'].forEach(function(reference) {
-			me.lookup(reference).setNodename(value);
-		    });
-		}
-	    }
+    viewModel: {
+	data: {
+	    nodename: ''
 	}
     },
 
-    initComponent: function() {
-	var me = this;
+    cbindData: {
+	nodename: undefined
+    },
 
-	var summarystore = Ext.create('Ext.data.Store', {
-	    model: 'KeyValue',
-	    sorters: [
+    subject: gettext('Virtual Machine'),
+
+    items: [
+	{
+	    xtype: 'inputpanel',
+	    title: gettext('General'),
+	    onlineHelp: 'qm_general_settings',
+	    column1: [
+		{
+		    xtype: 'pveNodeSelector',
+		    name: 'nodename',
+		    cbind: {
+			selectCurNode: '{!nodename}',
+			preferredValue: '{nodename}'
+		    },
+		    bind: {
+			value: '{nodename}'
+		    },
+		    fieldLabel: gettext('Node'),
+		    allowBlank: false,
+		    onlineValidator: true
+		},
+		{
+		    xtype: 'pveGuestIDSelector',
+		    name: 'vmid',
+		    guestType: 'qemu',
+		    value: '',
+		    loadNextFreeID: true,
+		    validateExists: false
+		},
+		{
+		    xtype: 'textfield',
+		    name: 'name',
+		    vtype: 'DnsName',
+		    value: '',
+		    fieldLabel: gettext('Name'),
+		    allowBlank: true
+		}
+	    ],
+	    column2: [
+		{
+		    xtype: 'pvePoolSelector',
+		    fieldLabel: gettext('Resource Pool'),
+		    name: 'pool',
+		    value: '',
+		    allowBlank: true
+		}
+	    ],
+	    onGetValues: function(values) {
+		if (!values.name) {
+		    delete values.name;
+		}
+		if (!values.pool) {
+		    delete values.pool;
+		}
+		return values;
+	    }
+	},
+	{
+	    xtype: 'container',
+	    layout: 'hbox',
+	    defaults: {
+		flex: 1,
+		padding: '0 10'
+	    },
+	    title: gettext('OS'),
+	    items: [
+		{
+		    xtype: 'pveQemuCDInputPanel',
+		    bind: {
+			nodename: '{nodename}'
+		    },
+		    confid: 'ide2',
+		    insideWizard: true
+		},
 		{
-		    property : 'key',
-		    direction: 'ASC'
+		    xtype: 'pveQemuOSTypePanel',
+		    insideWizard: true
 		}
 	    ]
-	});
-
-	Ext.applyIf(me, {
-	    subject: gettext('Virtual Machine'),
+	},
+	{
+	    xtype: 'pveQemuHDInputPanel',
+	    bind: {
+		nodename: '{nodename}'
+	    },
+	    title: gettext('Hard Disk'),
+	    isCreate: true,
+	    insideWizard: true
+	},
+	{
+	    xtype: 'pveQemuProcessorPanel',
+	    insideWizard: true,
+	    title: gettext('CPU')
+	},
+	{
+	    xtype: 'pveQemuMemoryPanel',
+	    insideWizard: true,
+	    title: gettext('Memory')
+	},
+	{
+	    xtype: 'pveQemuNetworkInputPanel',
+	    bind: {
+		nodename: '{nodename}'
+	    },
+	    title: gettext('Network'),
+	    insideWizard: true
+	},
+	{
+	    title: gettext('Confirm'),
+	    layout: 'fit',
 	    items: [
 		{
-		    xtype: 'inputpanel',
-		    title: gettext('General'),
-		    onlineHelp: 'qm_general_settings',
-		    column1: [
-			{
-			    xtype: 'pveNodeSelector',
-			    name: 'nodename',
-			    selectCurNode: !me.nodename,
-			    preferredValue: me.nodename,
-			    fieldLabel: gettext('Node'),
-			    allowBlank: false,
-			    onlineValidator: true
-			},
-			{
-			    xtype: 'pveGuestIDSelector',
-			    name: 'vmid',
-			    guestType: 'qemu',
-			    value: '',
-			    loadNextFreeID: true,
-			    validateExists: false
-			},
-			{
-			    xtype: 'textfield',
-			    name: 'name',
-			    vtype: 'DnsName',
-			    value: '',
-			    fieldLabel: gettext('Name'),
-			    allowBlank: true
-			}
-		    ],
-		    column2: [
-			{
-			    xtype: 'pvePoolSelector',
-			    fieldLabel: gettext('Resource Pool'),
-			    name: 'pool',
-			    value: '',
-			    allowBlank: true
-			}
-		    ],
-		    onGetValues: function(values) {
-			if (!values.name) {
-			    delete values.name;
-			}
-			if (!values.pool) {
-			    delete values.pool;
-			}
-			return values;
-		    }
-		},
-		{
-		    xtype: 'container',
-		    layout: 'hbox',
-		    defaults: {
-			flex: 1,
-			padding: '0 10'
+		    xtype: 'grid',
+		    store: {
+			model: 'KeyValue',
+			sorters: [{
+			    property : 'key',
+			    direction: 'ASC'
+			}]
 		    },
-		    title: gettext('OS'),
-		    items: [
-			{
-			    xtype: 'pveQemuCDInputPanel',
-			    reference: 'cdpanel',
-			    confid: 'ide2',
-			    insideWizard: true
-			},
-			{
-			    xtype: 'pveQemuOSTypePanel',
-			    insideWizard: true
-			}
+		    columns: [
+			{header: 'Key', width: 150, dataIndex: 'key'},
+			{header: 'Value', flex: 1, dataIndex: 'value'}
 		    ]
-		},
-		{
-		    xtype: 'pveQemuHDInputPanel',
-		    reference: 'hdpanel',
-		    title: gettext('Hard Disk'),
-		    isCreate: true,
-		    insideWizard: true
-		},
-		{
-		    xtype: 'pveQemuProcessorPanel',
-		    insideWizard: true,
-		    title: gettext('CPU')
-		},
-		{
-		    xtype: 'pveQemuMemoryPanel',
-		    insideWizard: true,
-		    title: gettext('Memory')
-		},
-		{
-		    xtype: 'pveQemuNetworkInputPanel',
-		    reference: 'networkpanel',
-		    title: gettext('Network'),
-		    insideWizard: true
-		},
-		{
-		    title: gettext('Confirm'),
-		    layout: 'fit',
-		    items: [
-			{
-			    xtype: 'grid',
-			    store: summarystore,
-			    columns: [
-				{header: 'Key', width: 150, dataIndex: 'key'},
-				{header: 'Value', flex: 1, dataIndex: 'value'}
-			    ]
+		}
+	    ],
+	    listeners: {
+		show: function(panel) {
+		    var kv = this.up('window').getValues();
+		    var data = [];
+		    Ext.Object.each(kv, function(key, value) {
+			if (key === 'delete') { // ignore
+			    return;
 			}
-		    ],
-		    listeners: {
-			show: function(panel) {
-			    var kv = me.getValues();
-			    var data = [];
-			    Ext.Object.each(kv, function(key, value) {
-				if (key === 'delete') { // ignore
-				    return;
-				}
-				data.push({ key: key, value: value });
-			    });
-			    summarystore.suspendEvents();
-			    summarystore.removeAll();
-			    summarystore.add(data);
-			    summarystore.sort();
-			    summarystore.resumeEvents();
-			    summarystore.fireEvent('refresh');
+			data.push({ key: key, value: value });
+		    });
 
-			}
+		    var summarystore = panel.down('grid').getStore();
+		    summarystore.suspendEvents();
+		    summarystore.removeAll();
+		    summarystore.add(data);
+		    summarystore.sort();
+		    summarystore.resumeEvents();
+		    summarystore.fireEvent('refresh');
+
+		}
+	    },
+	    onSubmit: function() {
+		var wizard = this.up('window');
+		var kv = wizard.getValues();
+		delete kv['delete'];
+
+		var nodename = kv.nodename;
+		delete kv.nodename;
+
+		Proxmox.Utils.API2Request({
+		    url: '/nodes/' + nodename + '/qemu',
+		    waitMsgTarget: wizard,
+		    method: 'POST',
+		    params: kv,
+		    success: function(response){
+			wizard.close();
 		    },
-		    onSubmit: function() {
-			var kv = me.getValues();
-			delete kv['delete'];
-
-			var nodename = kv.nodename;
-			delete kv.nodename;
-
-			Proxmox.Utils.API2Request({
-			    url: '/nodes/' + nodename + '/qemu',
-			    waitMsgTarget: me,
-			    method: 'POST',
-			    params: kv,
-			    success: function(response){
-				me.close();
-			    },
-			    failure: function(response, opts) {
-				Ext.Msg.alert(gettext('Error'), response.htmlStatus);
-			    }
-			});
+		    failure: function(response, opts) {
+			Ext.Msg.alert(gettext('Error'), response.htmlStatus);
 		    }
-		}
-	    ]
-	});
-
-	me.callParent();
-    }
+		});
+	    }
+	}
+    ]
 });
 
 
-- 
2.14.2