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). Signed-off-by: Stefan Reiter <s.rei...@proxmox.com> --- v2: Give licensing rights of the Athlon series back to it's rightful owner AMD (v1 had 'athlon' as Intel by mistake) 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..6c620d0c 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'], + ['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'], + + ['athlon', 'AMD'], + ['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