SafeDestroy.js: use modern ExtJS features

We now use the class config system, a View Model and a View Controller.

diff --git a/www/manager6/lxc/Config.js b/www/manager6/lxc/Config.js
index 1eafdb5c7447be8a3901aae0e73ec77a510b7c74..58386c9dc8e9a78954957a12edd37d3e6f005f70 100644 (file)
--- a/www/manager6/lxc/Config.js
+++ b/www/manager6/lxc/Config.js
@@ -89,8 +89,8 @@ Ext.define('PVE.lxc.Config', {
            disabled: !caps.vms['VM.Allocate'],
            handler: function() {
                Ext.create('PVE.window.SafeDestroy', {
-                   vmid: vmid,
-                   base_url: base_url
+                   url: base_url,
+                   item: { type: 'CT', id: vmid }
                }).show();
            }
        });

diff --git a/www/manager6/qemu/Config.js b/www/manager6/qemu/Config.js
index dce479279ffc2f026ce62a7fe5bed1fd318f1acb..85c695308d9c8e933fb345dd2ba8d248987afbf5 100644 (file)
--- a/www/manager6/qemu/Config.js
+++ b/www/manager6/qemu/Config.js
@@ -100,8 +100,8 @@ Ext.define('PVE.qemu.Config', {
            disabled: !caps.vms['VM.Allocate'],
            handler: function() {
                Ext.create('PVE.window.SafeDestroy', {
-                   vmid: vmid,
-                   base_url: base_url
+                   url: base_url,
+                   item: { type: 'VM', id: vmid }
                }).show();
            }
        });

diff --git a/www/manager6/window/SafeDestroy.js b/www/manager6/window/SafeDestroy.js
index 83c0d2050edb7f7699acb15154cd581cb749fb91..925e5d53db76837f33d2709baca0294463c370b6 100644 (file)
--- a/www/manager6/window/SafeDestroy.js
+++ b/www/manager6/window/SafeDestroy.js
@@ -5,83 +5,118 @@
 Ext.define('PVE.window.SafeDestroy', {
     extend: 'Ext.window.Window',
     alias: 'widget.pveSafeDestroy',
+
     title: gettext('Are you sure?'),
     modal: true,
     buttonAlign: 'center',
+    bodyPadding: 10,
+    width: 450,
+    layout: 'hbox',
+
+    viewModel: { type: 'default' },
+
+    config: {
+       item: {
+           id: undefined,
+           type: undefined
+       },
+       url: undefined
+    },
+
+    applyItem: function(item) {
+       var me = this;
+
+       if (!Ext.isDefined(item.id)) {
+           throw "no ID specified";
+       }
+
+       if (!Ext.isDefined(item.type)) {
+           throw "no VM type specified";
+       }
+
+       me.getViewModel().set('item', item);
+
+       return item;
+    },
+
+    controller: {
+
+       xclass: 'Ext.app.ViewController',
+
+       control: {
+           'field[name=confirm]': {
+               change: function(f, value) {
+                   var view = this.getView();
+                   var removeButton = this.lookupReference('removeButton');
+                   if (value === view.getItem().id) {
+                       removeButton.enable();
+                   } else {
+                       removeButton.disable();
+                   }
+               }
+           },
+            'button[reference=cancelButton]': {
+               click: function() {
+                   this.getView().close();
+               }
+           },
+            'button[reference=removeButton]': {
+               click: function() {
+                   var view = this.getView();
+                   PVE.Utils.API2Request({
+                       url: view.getUrl(),
+                       method: 'DELETE',
+                       waitMsgTarget: view,
+                       failure: function(response, opts) {
+                           Ext.Msg.alert('Error', response.htmlStatus);
+                       },
+                       callback: function() {
+                           view.close();
+                       }
+                   });
+               }
+            }
+       }
+    },
 
     items: [
        {
-           itemId: 'safepanel',
+           xtype: 'component',
+           cls: [ Ext.baseCSSPrefix + 'message-box-icon',
+                  Ext.baseCSSPrefix + 'message-box-warning',
+                  Ext.baseCSSPrefix + 'dlg-icon'],
+       },
+       {
            xtype: 'container',
-           padding: 10,
-           width: 450,
+           flex: 1,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [
                {
-                   itemId: 'message',
-                   xtype: 'textarea',
-                   editable: false,
+                   xtype: 'component',
+                   bind: gettext('Are you sure you want to remove {item.type} {item.id}? This will permanently erase all data.')
                },
                {
-                   itemId: 'input',
+                   reference: 'confirmField',
                    xtype: 'numberfield',
-                   name: 'VM id',
-                   fieldLabel: gettext('Please enter the VM ID to confirm'),
-                   hideTrigger:true,
-                   allowBlank: false,
-                   listeners: {
-                       change: function(f, value) {
-                           if (value === this.vmid) {
-                               this.submitBtn.enable();
-                           } else {
-                               this.submitBtn.disable();
-                           }
-                       }
-                   }
+                   name: 'confirm',
+                   labelWidth: 300,
+                   bind: {
+                       fieldLabel: gettext('Please enter the {item.type} ID to confirm'),
+                   },
+                   hideTrigger: true,
+                   allowBlank: false
                }
-           ]
+           ],
        }
     ],
     buttons: [
        {
-           id: 'removeButton',
+           reference: 'removeButton',
            text: gettext('Remove'),
-           disabled: true,
-           handler: function () {
-               var me = this;
-               PVE.Utils.API2Request({
-                   url: me.base_url,
-                   method: 'DELETE',
-                   waitMsgTarget: me,
-                   failure: function(response, opts) {
-                       Ext.Msg.alert('Error', response.htmlStatus);
-                   }
-               });
-               me.up('window').close();
-           }
-       }, {
-           text: gettext('Cancel'),
-           handler: function() {
-               this.up('window').close();
-           }
+           disabled: true
        }
-    ],
-
-    initComponent: function() {
-       var me = this;
-       me.callParent();
-
-       var msg = Ext.String.format(gettext('Are you sure you want to remove VM {0}? This will permanently erase all VM data.'), me.vmid);
-
-       var submitBtn = me.down('toolbar').getComponent('removeButton');
-       submitBtn.base_url= me.base_url;
-
-       var safepanel = me.getComponent('safepanel');
-       safepanel.getComponent('message').setValue(msg);
-       safepanel.getComponent('input').vmid = me.vmid;
-       safepanel.getComponent('input').submitBtn = submitBtn;
-    }
+    ]
 });