[pve-devel] [PATCH manager 02/19] use ComboGrid from proxmox-widget-toolkit
Dominik Csapak
d.csapak at proxmox.com
Thu Dec 21 13:36:05 CET 2017
Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
www/manager6/Makefile | 1 -
www/manager6/ceph/OSD.js | 2 +-
www/manager6/form/BridgeSelector.js | 2 +-
www/manager6/form/ComboGrid.js | 353 -----------------------------
www/manager6/form/FileSelector.js | 2 +-
www/manager6/form/GroupSelector.js | 2 +-
www/manager6/form/IPProtocolSelector.js | 2 +-
www/manager6/form/IPRefSelector.js | 2 +-
www/manager6/form/NodeSelector.js | 2 +-
www/manager6/form/PoolSelector.js | 2 +-
www/manager6/form/RoleSelector.js | 2 +-
www/manager6/form/SecurityGroupSelector.js | 2 +-
www/manager6/form/SnapshotSelector.js | 2 +-
www/manager6/form/StorageSelector.js | 2 +-
www/manager6/form/USBSelector.js | 2 +-
www/manager6/form/UserSelector.js | 2 +-
www/manager6/form/VMSelector.js | 2 +-
www/manager6/grid/FirewallRules.js | 2 +-
www/manager6/ha/GroupSelector.js | 2 +-
19 files changed, 17 insertions(+), 371 deletions(-)
delete mode 100644 www/manager6/form/ComboGrid.js
diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 6f5b72ca..6a5b8252 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -31,7 +31,6 @@ JSSRC= \
form/TextField.js \
form/IntegerField.js \
form/RRDTypeSelector.js \
- form/ComboGrid.js \
form/KVComboBox.js \
form/Boolean.js \
form/CompressionSelector.js \
diff --git a/www/manager6/ceph/OSD.js b/www/manager6/ceph/OSD.js
index cb358eab..ed147672 100644
--- a/www/manager6/ceph/OSD.js
+++ b/www/manager6/ceph/OSD.js
@@ -1,5 +1,5 @@
Ext.define('PVE.form.CephDiskSelector', {
- extend: 'PVE.form.ComboGrid',
+ extend: 'Proxmox.form.ComboGrid',
alias: ['widget.pveCephDiskSelector'],
diskType: 'journal_disks',
diff --git a/www/manager6/form/BridgeSelector.js b/www/manager6/form/BridgeSelector.js
index bd07c206..2c5ca281 100644
--- a/www/manager6/form/BridgeSelector.js
+++ b/www/manager6/form/BridgeSelector.js
@@ -1,5 +1,5 @@
Ext.define('PVE.form.BridgeSelector', {
- extend: 'PVE.form.ComboGrid',
+ extend: 'Proxmox.form.ComboGrid',
alias: ['widget.PVE.form.BridgeSelector'],
bridgeType: 'any_bridge', // bridge, OVSBridge or any_bridge
diff --git a/www/manager6/form/ComboGrid.js b/www/manager6/form/ComboGrid.js
deleted file mode 100644
index ee58c299..00000000
--- a/www/manager6/form/ComboGrid.js
+++ /dev/null
@@ -1,353 +0,0 @@
-/*
- * ComboGrid component: a ComboBox where the dropdown menu (the
- * "Picker") is a Grid with Rows and Columns expects a listConfig
- * object with a columns property roughly based on the GridPicker from
- * https://www.sencha.com/forum/showthread.php?299909
- *
-*/
-
-Ext.define('PVE.form.ComboGrid', {
- extend: 'Ext.form.field.ComboBox',
- alias: ['widget.PVE.form.ComboGrid'],
-
- // this value is used as default value after load()
- preferredValue: undefined,
-
- // hack: allow to select empty value
- // seems extjs does not allow that when 'editable == false'
- onKeyUp: function(e, t) {
- var me = this;
- var key = e.getKey();
-
- if (!me.editable && me.allowBlank && !me.multiSelect &&
- (key == e.BACKSPACE || key == e.DELETE)) {
- me.setValue('');
- }
-
- me.callParent(arguments);
- },
-
- // needed to trigger onKeyUp etc.
- enableKeyEvents: true,
-
- editable: false,
-
- // override ExtJS method
- // if the field has multiSelect enabled, the store is not loaded, and
- // the displayfield == valuefield, it saves the rawvalue as an array
- // but the getRawValue method is only defined in the textfield class
- // (which has not to deal with arrays) an returns the string in the
- // field (not an array)
- //
- // so if we have multiselect enabled, return the rawValue (which
- // should be an array) and else we do callParent so
- // it should not impact any other use of the class
- getRawValue: function() {
- var me = this;
- if (me.multiSelect) {
- return me.rawValue;
- } else {
- return me.callParent();
- }
- },
-
-// override ExtJS protected method
- onBindStore: function(store, initial) {
- var me = this,
- picker = me.picker,
- extraKeySpec,
- valueCollectionConfig;
-
- // We're being bound, not unbound...
- if (store) {
- // If store was created from a 2 dimensional array with generated field names 'field1' and 'field2'
- if (store.autoCreated) {
- me.queryMode = 'local';
- me.valueField = me.displayField = 'field1';
- if (!store.expanded) {
- me.displayField = 'field2';
- }
-
- // displayTpl config will need regenerating with the autogenerated displayField name 'field1'
- me.setDisplayTpl(null);
- }
- if (!Ext.isDefined(me.valueField)) {
- me.valueField = me.displayField;
- }
-
- // Add a byValue index to the store so that we can efficiently look up records by the value field
- // when setValue passes string value(s).
- // The two indices (Ext.util.CollectionKeys) are configured unique: false, so that if duplicate keys
- // are found, they are all returned by the get call.
- // This is so that findByText and findByValue are able to return the *FIRST* matching value. By default,
- // if unique is true, CollectionKey keeps the *last* matching value.
- extraKeySpec = {
- byValue: {
- rootProperty: 'data',
- unique: false
- }
- };
- extraKeySpec.byValue.property = me.valueField;
- store.setExtraKeys(extraKeySpec);
-
- if (me.displayField === me.valueField) {
- store.byText = store.byValue;
- } else {
- extraKeySpec.byText = {
- rootProperty: 'data',
- unique: false
- };
- extraKeySpec.byText.property = me.displayField;
- store.setExtraKeys(extraKeySpec);
- }
-
- // We hold a collection of the values which have been selected, keyed by this field's valueField.
- // This collection also functions as the selected items collection for the BoundList's selection model
- valueCollectionConfig = {
- rootProperty: 'data',
- extraKeys: {
- byInternalId: {
- property: 'internalId'
- },
- byValue: {
- property: me.valueField,
- rootProperty: 'data'
- }
- },
- // Whenever this collection is changed by anyone, whether by this field adding to it,
- // or the BoundList operating, we must refresh our value.
- listeners: {
- beginupdate: me.onValueCollectionBeginUpdate,
- endupdate: me.onValueCollectionEndUpdate,
- scope: me
- }
- };
-
- // This becomes our collection of selected records for the Field.
- me.valueCollection = new Ext.util.Collection(valueCollectionConfig);
-
- // We use the selected Collection as our value collection and the basis
- // for rendering the tag list.
-
- //pve override: since the picker is represented by a grid panel,
- // we changed here the selection to RowModel
- me.pickerSelectionModel = new Ext.selection.RowModel({
- mode: me.multiSelect ? 'SIMPLE' : 'SINGLE',
- // There are situations when a row is selected on mousedown but then the mouse is dragged to another row
- // and released. In these situations, the event target for the click event won't be the row where the mouse
- // was released but the boundview. The view will then determine that it should fire a container click, and
- // the DataViewModel will then deselect all prior selections. Setting `deselectOnContainerClick` here will
- // prevent the model from deselecting.
- deselectOnContainerClick: false,
- enableInitialSelection: false,
- pruneRemoved: false,
- selected: me.valueCollection,
- store: store,
- listeners: {
- scope: me,
- lastselectedchanged: me.updateBindSelection
- }
- });
-
- if (!initial) {
- me.resetToDefault();
- }
-
- if (picker) {
- picker.setSelectionModel(me.pickerSelectionModel);
- if (picker.getStore() !== store) {
- picker.bindStore(store);
- }
- }
- }
- },
-
- // copied from ComboBox
- createPicker: function() {
- var me = this;
- var picker;
-
- var pickerCfg = Ext.apply({
- // pve overrides: display a grid for selection
- xtype: 'gridpanel',
- id: me.pickerId,
- pickerField: me,
- floating: true,
- hidden: true,
- store: me.store,
- displayField: me.displayField,
- preserveScrollOnRefresh: true,
- pageSize: me.pageSize,
- tpl: me.tpl,
- selModel: me.pickerSelectionModel,
- focusOnToFront: false
- }, me.listConfig, me.defaultListConfig);
-
- picker = me.picker || Ext.widget(pickerCfg);
-
- if (picker.getStore() !== me.store) {
- picker.bindStore(me.store);
- }
-
- if (me.pageSize) {
- picker.pagingToolbar.on('beforechange', me.onPageChange, me);
- }
-
- // pve overrides: pass missing method in gridPanel to its view
- picker.refresh = function() {
- picker.getSelectionModel().select(me.valueCollection.getRange());
- picker.getView().refresh();
- };
- picker.getNodeByRecord = function() {
- picker.getView().getNodeByRecord(arguments);
- };
-
- // We limit the height of the picker to fit in the space above
- // or below this field unless the picker has its own ideas about that.
- if (!picker.initialConfig.maxHeight) {
- picker.on({
- beforeshow: me.onBeforePickerShow,
- scope: me
- });
- }
- picker.getSelectionModel().on({
- beforeselect: me.onBeforeSelect,
- beforedeselect: me.onBeforeDeselect,
- focuschange: me.onFocusChange,
- selectionChange: function (sm, selectedRecords) {
- var me = this;
- if (selectedRecords.length) {
- me.setValue(selectedRecords);
- me.fireEvent('select', me, selectedRecords);
- }
- },
- scope: me
- });
-
- // hack for extjs6
- // when the clicked item is the same as the previously selected,
- // it does not select the item
- // instead we hide the picker
- if (!me.multiSelect) {
- picker.on('itemclick', function (sm,record) {
- if (picker.getSelection()[0] === record) {
- picker.hide();
- }
- });
- }
-
- // when our store is not yet loaded, we increase
- // the height of the gridpanel, so that we can see
- // the loading mask
- //
- // we save the minheight to reset it after the load
- picker.on('show', function() {
- if (me.enableLoadMask) {
- me.savedMinHeight = picker.getMinHeight();
- picker.setMinHeight(100);
- }
- });
-
- picker.getNavigationModel().navigateOnSpace = false;
-
- return picker;
- },
-
- initComponent: function() {
- var me = this;
-
- Ext.apply(me, {
- queryMode: 'local',
- matchFieldWidth: false
- });
-
- Ext.applyIf(me, { value: ''}); // hack: avoid ExtJS validate() bug
-
- Ext.applyIf(me.listConfig, { width: 400 });
-
- me.callParent();
-
- // Create the picker at an early stage, so it is available to store the previous selection
- if (!me.picker) {
- me.createPicker();
- }
-
- if (me.editable) {
- // The trigger.picker causes first a focus event on the field then
- // toggles the selection picker. Thus skip expanding in this case,
- // else our focus listner expands and the picker.trigger then
- // collapses it directly afterwards.
- Ext.override(me.triggers.picker, {
- onMouseDown : function (e) {
- // copied "should we focus" check from Ext.form.trigger.Trigger
- if (e.pointerType !== 'touch' && !this.field.owns(Ext.Element.getActiveElement())) {
- me.skip_expand_on_focus = true;
- }
- this.callParent(arguments);
- }
- });
-
- me.on("focus", function(me) {
- if (!me.isExpanded && !me.skip_expand_on_focus) {
- me.expand();
- }
- me.skip_expand_on_focus = false;
- });
- }
-
- me.mon(me.store, 'beforeload', function() {
- if (!me.isDisabled()) {
- me.enableLoadMask = true;
- }
- });
-
- // hack: autoSelect does not work
- me.mon(me.store, 'load', function(store, r, success, o) {
- if (success) {
- me.clearInvalid();
-
- if (me.enableLoadMask) {
- delete me.enableLoadMask;
-
- // if the picker exists,
- // we reset its minheight to the saved var/0
- // we have to update the layout, otherwise the height
- // gets not recalculated
- if (me.picker) {
- me.picker.setMinHeight(me.savedMinHeight || 0);
- delete me.savedMinHeight;
- me.picker.updateLayout();
- }
- }
-
- var def = me.getValue() || me.preferredValue;
- if (def) {
- me.setValue(def, true); // sync with grid
- }
- var found = false;
- if (def) {
- if (Ext.isArray(def)) {
- Ext.Array.each(def, function(v) {
- if (store.findRecord(me.valueField, v)) {
- found = true;
- return false; // break
- }
- });
- } else {
- found = store.findRecord(me.valueField, def);
- }
- }
-
- if (!found) {
- var rec = me.store.first();
- if (me.autoSelect && rec && rec.data) {
- def = rec.data[me.valueField];
- me.setValue(def, true);
- } else {
- me.setValue(me.editable ? def : '', true);
- }
- }
- }
- });
- }
-});
diff --git a/www/manager6/form/FileSelector.js b/www/manager6/form/FileSelector.js
index fefe8470..5f1e3dde 100644
--- a/www/manager6/form/FileSelector.js
+++ b/www/manager6/form/FileSelector.js
@@ -1,5 +1,5 @@
Ext.define('PVE.form.FileSelector', {
- extend: 'PVE.form.ComboGrid',
+ extend: 'Proxmox.form.ComboGrid',
alias: 'widget.pveFileSelector',
editable: true,
diff --git a/www/manager6/form/GroupSelector.js b/www/manager6/form/GroupSelector.js
index 2db8e5af..4aba4d65 100644
--- a/www/manager6/form/GroupSelector.js
+++ b/www/manager6/form/GroupSelector.js
@@ -1,5 +1,5 @@
Ext.define('PVE.form.GroupSelector', {
- extend: 'PVE.form.ComboGrid',
+ extend: 'Proxmox.form.ComboGrid',
alias: ['widget.pveGroupSelector'],
allowBlank: false,
diff --git a/www/manager6/form/IPProtocolSelector.js b/www/manager6/form/IPProtocolSelector.js
index af166fc2..5a53b125 100644
--- a/www/manager6/form/IPProtocolSelector.js
+++ b/www/manager6/form/IPProtocolSelector.js
@@ -1,5 +1,5 @@
Ext.define('PVE.form.IPProtocolSelector', {
- extend: 'PVE.form.ComboGrid',
+ extend: 'Proxmox.form.ComboGrid',
alias: ['widget.pveIPProtocolSelector'],
valueField: 'p',
displayField: 'p',
diff --git a/www/manager6/form/IPRefSelector.js b/www/manager6/form/IPRefSelector.js
index 728f5f7e..bb7cb5b8 100644
--- a/www/manager6/form/IPRefSelector.js
+++ b/www/manager6/form/IPRefSelector.js
@@ -1,5 +1,5 @@
Ext.define('PVE.form.IPRefSelector', {
- extend: 'PVE.form.ComboGrid',
+ extend: 'Proxmox.form.ComboGrid',
alias: ['widget.pveIPRefSelector'],
base_url: undefined,
diff --git a/www/manager6/form/NodeSelector.js b/www/manager6/form/NodeSelector.js
index 6fcced37..386593b6 100644
--- a/www/manager6/form/NodeSelector.js
+++ b/www/manager6/form/NodeSelector.js
@@ -1,5 +1,5 @@
Ext.define('PVE.form.NodeSelector', {
- extend: 'PVE.form.ComboGrid',
+ extend: 'Proxmox.form.ComboGrid',
alias: ['widget.pveNodeSelector'],
// invalidate nodes which are offline
diff --git a/www/manager6/form/PoolSelector.js b/www/manager6/form/PoolSelector.js
index 4e7b2f3f..fea56b8e 100644
--- a/www/manager6/form/PoolSelector.js
+++ b/www/manager6/form/PoolSelector.js
@@ -1,5 +1,5 @@
Ext.define('PVE.form.PoolSelector', {
- extend: 'PVE.form.ComboGrid',
+ extend: 'Proxmox.form.ComboGrid',
alias: ['widget.pvePoolSelector'],
allowBlank: false,
diff --git a/www/manager6/form/RoleSelector.js b/www/manager6/form/RoleSelector.js
index acef5f90..ba91b24c 100644
--- a/www/manager6/form/RoleSelector.js
+++ b/www/manager6/form/RoleSelector.js
@@ -1,5 +1,5 @@
Ext.define('PVE.form.RoleSelector', {
- extend: 'PVE.form.ComboGrid',
+ extend: 'Proxmox.form.ComboGrid',
alias: ['widget.pveRoleSelector'],
allowBlank: false,
diff --git a/www/manager6/form/SecurityGroupSelector.js b/www/manager6/form/SecurityGroupSelector.js
index b805c291..8f946af7 100644
--- a/www/manager6/form/SecurityGroupSelector.js
+++ b/www/manager6/form/SecurityGroupSelector.js
@@ -1,5 +1,5 @@
Ext.define('PVE.form.SecurityGroupsSelector', {
- extend: 'PVE.form.ComboGrid',
+ extend: 'Proxmox.form.ComboGrid',
alias: ['widget.pveSecurityGroupsSelector'],
valueField: 'group',
diff --git a/www/manager6/form/SnapshotSelector.js b/www/manager6/form/SnapshotSelector.js
index ea7d460e..8ccec0dd 100644
--- a/www/manager6/form/SnapshotSelector.js
+++ b/www/manager6/form/SnapshotSelector.js
@@ -1,5 +1,5 @@
Ext.define('PVE.form.SnapshotSelector', {
- extend: 'PVE.form.ComboGrid',
+ extend: 'Proxmox.form.ComboGrid',
alias: ['widget.PVE.form.SnapshotSelector'],
valueField: 'name',
diff --git a/www/manager6/form/StorageSelector.js b/www/manager6/form/StorageSelector.js
index 184869d1..bc0e6896 100644
--- a/www/manager6/form/StorageSelector.js
+++ b/www/manager6/form/StorageSelector.js
@@ -1,5 +1,5 @@
Ext.define('PVE.form.StorageSelector', {
- extend: 'PVE.form.ComboGrid',
+ extend: 'Proxmox.form.ComboGrid',
alias: 'widget.pveStorageSelector',
allowBlank: false,
diff --git a/www/manager6/form/USBSelector.js b/www/manager6/form/USBSelector.js
index bc09b8d6..a8a8da52 100644
--- a/www/manager6/form/USBSelector.js
+++ b/www/manager6/form/USBSelector.js
@@ -1,5 +1,5 @@
Ext.define('PVE.form.USBSelector', {
- extend: 'PVE.form.ComboGrid',
+ extend: 'Proxmox.form.ComboGrid',
alias: ['widget.pveUSBSelector'],
allowBlank: false,
autoSelect: false,
diff --git a/www/manager6/form/UserSelector.js b/www/manager6/form/UserSelector.js
index c131b224..ef95d899 100644
--- a/www/manager6/form/UserSelector.js
+++ b/www/manager6/form/UserSelector.js
@@ -1,5 +1,5 @@
Ext.define('PVE.form.UserSelector', {
- extend: 'PVE.form.ComboGrid',
+ extend: 'Proxmox.form.ComboGrid',
alias: ['widget.pveUserSelector'],
allowBlank: false,
autoSelect: false,
diff --git a/www/manager6/form/VMSelector.js b/www/manager6/form/VMSelector.js
index 2856f3ff..c3375fb4 100644
--- a/www/manager6/form/VMSelector.js
+++ b/www/manager6/form/VMSelector.js
@@ -215,7 +215,7 @@ Ext.define('PVE.form.VMSelector', {
Ext.define('PVE.form.VMComboSelector', {
- extend: 'PVE.form.ComboGrid',
+ extend: 'Proxmox.form.ComboGrid',
alias: 'widget.vmComboSelector',
valueField: 'vmid',
diff --git a/www/manager6/grid/FirewallRules.js b/www/manager6/grid/FirewallRules.js
index 2cd79ab7..5adf7e80 100644
--- a/www/manager6/grid/FirewallRules.js
+++ b/www/manager6/grid/FirewallRules.js
@@ -1,5 +1,5 @@
Ext.define('PVE.form.FWMacroSelector', {
- extend: 'PVE.form.ComboGrid',
+ extend: 'Proxmox.form.ComboGrid',
alias: 'widget.pveFWMacroSelector',
allowBlank: true,
autoSelect: false,
diff --git a/www/manager6/ha/GroupSelector.js b/www/manager6/ha/GroupSelector.js
index 74877398..3c2f23d8 100644
--- a/www/manager6/ha/GroupSelector.js
+++ b/www/manager6/ha/GroupSelector.js
@@ -1,5 +1,5 @@
Ext.define('PVE.ha.GroupSelector', {
- extend: 'PVE.form.ComboGrid',
+ extend: 'Proxmox.form.ComboGrid',
alias: ['widget.pveHAGroupSelector'],
value: [],
--
2.11.0
More information about the pve-devel
mailing list