SafeDestroy.js: use modern ExtJS features

We now use the class config system, a View Model and a View Controller.
This commit is contained in:
Dietmar Maurer 2016-03-30 09:07:32 +02:00
parent b11db5ebcb
commit 1509fb3477
3 changed files with 95 additions and 60 deletions
www/manager6

@ -89,8 +89,8 @@ Ext.define('PVE.lxc.Config', {
disabled: !caps.vms['VM.Allocate'], disabled: !caps.vms['VM.Allocate'],
handler: function() { handler: function() {
Ext.create('PVE.window.SafeDestroy', { Ext.create('PVE.window.SafeDestroy', {
vmid: vmid, url: base_url,
base_url: base_url item: { type: 'CT', id: vmid }
}).show(); }).show();
} }
}); });

@ -100,8 +100,8 @@ Ext.define('PVE.qemu.Config', {
disabled: !caps.vms['VM.Allocate'], disabled: !caps.vms['VM.Allocate'],
handler: function() { handler: function() {
Ext.create('PVE.window.SafeDestroy', { Ext.create('PVE.window.SafeDestroy', {
vmid: vmid, url: base_url,
base_url: base_url item: { type: 'VM', id: vmid }
}).show(); }).show();
} }
}); });

@ -5,83 +5,118 @@
Ext.define('PVE.window.SafeDestroy', { Ext.define('PVE.window.SafeDestroy', {
extend: 'Ext.window.Window', extend: 'Ext.window.Window',
alias: 'widget.pveSafeDestroy', alias: 'widget.pveSafeDestroy',
title: gettext('Are you sure?'), title: gettext('Are you sure?'),
modal: true, modal: true,
buttonAlign: 'center', 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: [ items: [
{ {
itemId: 'safepanel', xtype: 'component',
cls: [ Ext.baseCSSPrefix + 'message-box-icon',
Ext.baseCSSPrefix + 'message-box-warning',
Ext.baseCSSPrefix + 'dlg-icon'],
},
{
xtype: 'container', xtype: 'container',
padding: 10, flex: 1,
width: 450,
layout: { layout: {
type: 'vbox', type: 'vbox',
align: 'stretch' align: 'stretch'
}, },
items: [ items: [
{ {
itemId: 'message', xtype: 'component',
xtype: 'textarea', bind: gettext('Are you sure you want to remove {item.type} {item.id}? This will permanently erase all data.')
editable: false,
}, },
{ {
itemId: 'input', reference: 'confirmField',
xtype: 'numberfield', xtype: 'numberfield',
name: 'VM id', name: 'confirm',
fieldLabel: gettext('Please enter the VM ID to confirm'), labelWidth: 300,
hideTrigger:true, bind: {
allowBlank: false, fieldLabel: gettext('Please enter the {item.type} ID to confirm'),
listeners: { },
change: function(f, value) { hideTrigger: true,
if (value === this.vmid) { allowBlank: false
this.submitBtn.enable();
} else {
this.submitBtn.disable();
}
}
}
} }
] ],
} }
], ],
buttons: [ buttons: [
{ {
id: 'removeButton', reference: 'removeButton',
text: gettext('Remove'), text: gettext('Remove'),
disabled: true, 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();
}
} }
], ]
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;
}
}); });