this makes it easier to have the same KVComboBox, but for different configurations, depending on a single 'category' value. This is useful for having the same KVComboBox in different categories, such as the cpu architecture, for e.g. the scsi hw or bios selector, which need different values for different architectures.
Instead of implementing the logic for each KVComboBox, abstract it away, so we can reuse the code and have consistent behavior here. Signed-off-by: Dominik Csapak <[email protected]> --- www/manager6/Makefile | 1 + www/manager6/form/FilteredKVComboBox.js | 67 +++++++++++++++++++++++++ 2 files changed, 68 insertions(+) create mode 100644 www/manager6/form/FilteredKVComboBox.js diff --git a/www/manager6/Makefile b/www/manager6/Makefile index 944dd873..8857045c 100644 --- a/www/manager6/Makefile +++ b/www/manager6/Makefile @@ -17,6 +17,7 @@ JSSRC= \ data/ResourceStore.js \ data/model/RRDModels.js \ container/TwoColumnContainer.js \ + form/FilteredKVComboBox.js \ form/ACMEAPISelector.js \ form/ACMEAccountSelector.js \ form/ACMEPluginSelector.js \ diff --git a/www/manager6/form/FilteredKVComboBox.js b/www/manager6/form/FilteredKVComboBox.js new file mode 100644 index 00000000..0e24a79f --- /dev/null +++ b/www/manager6/form/FilteredKVComboBox.js @@ -0,0 +1,67 @@ +Ext.define('PVE.form.FilteredKVComboBox', { + extend: 'Proxmox.form.KVComboBox', + alias: ['widget.pveFilteredKVComboBox'], + + // sam as in the KVComboBox + comboItems: undefined, + + // contains the allowed keys per category, e.g. + // { + // category1: ['foo', 'bar'], + // cateogry2: ['foo'],' + // } + // + // to have an effect, the listed values must exist in the comboItems list + allowedValuesPerCategory: {}, + + // the current category. If not set, the store is not filtered. + category: undefined, + + // If set, will be used to update the display value of the '__default__' value + // that is usually set in a KVComboBox. + // + // gets the current category (if any) as parameter) + setDefaultDisplay: undefined, + + setCategory: function (category) { + let me = this; + me.category = category; + me.filterByCategory(category); + }, + + filterByCategory: function (category) { + let me = this; + let wasValid = me.isValid(); + me.store.clearFilter(); + + let allowedKeys = me.allowedValuesPerCategory[category]; + if (allowedKeys) { + me.store.addFilter((rec) => allowedKeys.indexOf(rec.data.key) !== -1); + } + + let isValid = me.isValid(); + // update default value with new arch + if (Ext.isFunction(me.setDefaultDisplay)) { + let record = me.store.findRecord('key', '__default__'); + if (record) { + record.set('value', me.setDefaultDisplay(category)); + record.commit(); + } + } + + // for some reason, adding/changing filters does not trigger this, even though + // it show the field as invalid, so simply track and fire the event manually. + if (wasValid !== isValid) { + me.fireEvent('validitychange', isValid); + } + }, + + initComponent: function () { + var me = this; + + me.callParent(); + + // initial filtering + me.setCategory(me.category); + }, +}); -- 2.47.3
