Most of the code is adapted from KVComboBox, from which it inherited
before, with some generic code removed.
The templating code adds a header for every group transition it
encounters, thus providing support for arbitrary groups (e.g. custom
models in the future).
Functionality is the same as before.
Signed-off-by: Stefan Reiter <s.rei...@proxmox.com>
---
The list is only going to grow I suspect, especially with custom models
potentially being available in the future. Let's give the users some eye-candy
to more easily parse what they see :)
www/css/ext6-pve.css | 11 ++
www/manager6/form/CPUModelSelector.js | 151 ++++++++++++++++++++------
2 files changed, 128 insertions(+), 34 deletions(-)
diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index 535f8e60..70582f53 100644
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -631,3 +631,14 @@ table.osds td:first-of-type {
background-color: rgb(245, 245, 245);
color: #000;
}
+
+/* CPUModelSelector header & item style */
+.cpumodel-group-header {
+ padding: 4px 4px 4px 7px;
+ font-weight: bold;
+ border-bottom: 1px solid #ddd;
+}
+
+.cpumodel-item:not(:first-child) {
+ padding: 0 0 0 10px;
+}
diff --git a/www/manager6/form/CPUModelSelector.js
b/www/manager6/form/CPUModelSelector.js
index 9eb5b0e9..c5ad38d6 100644
--- a/www/manager6/form/CPUModelSelector.js
+++ b/www/manager6/form/CPUModelSelector.js
@@ -1,38 +1,121 @@
Ext.define('PVE.form.CPUModelSelector', {
- extend: 'Proxmox.form.KVComboBox',
+ extend: 'Ext.form.field.ComboBox',
alias: ['widget.CPUModelSelector'],
comboItems: [
- ['__default__', Proxmox.Utils.defaultText + ' (kvm64)'],
- ['486', '486'],
- ['athlon', 'athlon'],
- ['core2duo', 'core2duo'],
- ['coreduo', 'coreduo'],
- ['kvm32', 'kvm32'],
- ['kvm64', 'kvm64'],
- ['pentium', 'pentium'],
- ['pentium2', 'pentium2'],
- ['pentium3', 'pentium3'],
- ['phenom', 'phenom'],
- ['qemu32', 'qemu32'],
- ['qemu64', 'qemu64'],
- ['Conroe', 'Conroe'],
- ['Penryn', 'Penryn'],
- ['Nehalem', 'Nehalem'],
- ['Westmere', 'Westmere'],
- ['SandyBridge', 'SandyBridge'],
- ['IvyBridge', 'IvyBridge'],
- ['Haswell', 'Haswell'],
- ['Haswell-noTSX','Haswell-noTSX'],
- ['Broadwell', 'Broadwell'],
- ['Broadwell-noTSX','Broadwell-noTSX'],
- ['Skylake-Client','Skylake-Client'],
- ['Opteron_G1', 'Opteron_G1'],
- ['Opteron_G2', 'Opteron_G2'],
- ['Opteron_G3', 'Opteron_G3'],
- ['Opteron_G4', 'Opteron_G4'],
- ['Opteron_G5', 'Opteron_G5'],
- ['EPYC', 'EPYC'],
- ['host', 'host']
-
- ]
+ // default value has to be first!
+ [Proxmox.Utils.defaultText + ' (kvm64)', ''],
+
+ ['486', 'Intel'],
+ ['athlon', 'Intel'],
+ ['core2duo', 'Intel'],
+ ['coreduo', 'Intel'],
+ ['pentium', 'Intel'],
+ ['pentium2', 'Intel'],
+ ['pentium3', 'Intel'],
+ ['Conroe', 'Intel'],
+ ['Penryn', 'Intel'],
+ ['Nehalem', 'Intel'],
+ ['Westmere', 'Intel'],
+ ['SandyBridge', 'Intel'],
+ ['IvyBridge', 'Intel'],
+ ['Haswell', 'Intel'],
+ ['Haswell-noTSX', 'Intel'],
+ ['Broadwell', 'Intel'],
+ ['Broadwell-noTSX', 'Intel'],
+ ['Skylake-Client', 'Intel'],
+
+ ['phenom', 'AMD'],
+ ['Opteron_G1', 'AMD'],
+ ['Opteron_G2', 'AMD'],
+ ['Opteron_G3', 'AMD'],
+ ['Opteron_G4', 'AMD'],
+ ['Opteron_G5', 'AMD'],
+ ['EPYC', 'AMD'],
+
+ ['kvm32', 'Other'],
+ ['kvm64', 'Other'],
+ ['qemu32', 'Other'],
+ ['qemu64', 'Other'],
+ ['host', 'Other']
+ ],
+
+ queryMode: 'local',
+ displayField: 'key',
+ valueField: 'key',
+ editable: false,
+ tpl: Ext.create('Ext.XTemplate',
+ '{[this.currentKey = ""]}' +
+ '<tpl for=".">' +
+ '<tpl if="this.showHeader(value)">' +
+ '<div class="cpumodel-group-header">{value}</div>' +
+ '</tpl>' +
+ '<div class="x-boundlist-item cpumodel-item">{key}</div>' +
+ '</tpl>',
+ {
+ showHeader: function(key){
+ if (this.currentKey != key) {
+ this.currentKey = key;
+ return true;
+ }
+ return false;
+ }
+ }
+ ),
+
+ // overide framework function to allow "Default" value
+ getSubmitData: function() {
+ var me = this,
+ data = null,
+ val;
+
+ if (!me.disabled && me.submitValue) {
+ val = me.getSubmitValue();
+ data = {};
+ if (val !== null && val !== me.comboItems[0][0]) {
+ data[me.getName()] = val;
+ } else {
+ data['delete'] = me.getName();
+ }
+ }
+
+ return data;
+ },
+
+ validator: function(val) {
+ var me = this;
+
+ if (val === null || val === '') {
+ return false;
+ }
+
+ if (me.store.getCount() > 0) {
+ var items = me.store.getData().collect('key', 'data');
+ return Ext.Array.contains(items, val);
+ }
+
+ // should not happen
+ /*jslint confusion: true */
+ return "no valid values found";
+ },
+
+ initComponent: function() {
+ var me = this;
+
+ me.store = Ext.create('Ext.data.ArrayStore', {
+ model: 'KeyValue',
+ data: me.comboItems
+ });
+
+ me.callParent();
+ },
+
+ setValue: function(value) {
+ var me = this;
+
+ if (value === '__default__') {
+ value = me.comboItems[0][0];
+ }
+
+ me.callParent([value]);
+ }
});
--
2.20.1
_______________________________________________
pve-devel mailing list
pve-devel@pve.proxmox.com
https://pve.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
