[pve-devel] [PATCH pve-manager] Ext6migrate: Update our ComboGrid component to work with ExtJS6

Emmanuel Kasper e.kasper at proxmox.com
Tue Jan 5 16:20:21 CET 2016


The ComboGrid combonent requires row-like selection something that
the default ExtJS Ext.selection.DataViewModel used for ComboBox cannot do.

This requires overriding the private method onBindStore where the selection
model is set.
---
 www/manager6/form/ComboGrid.js | 208 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 176 insertions(+), 32 deletions(-)

diff --git a/www/manager6/form/ComboGrid.js b/www/manager6/form/ComboGrid.js
index a226cb5..23e7b49 100644
--- a/www/manager6/form/ComboGrid.js
+++ b/www/manager6/form/ComboGrid.js
@@ -1,3 +1,8 @@
+/*
+ * ComboGrid component:
+ * a ComboBox where the dropdown menu (the "Picker") is a Grid with Rows and Columns
+ */
+
 Ext.define('PVE.form.ComboGrid', {
     extend: 'Ext.form.field.ComboBox',
     alias: ['widget.PVE.form.ComboGrid'],
@@ -19,45 +24,179 @@ Ext.define('PVE.form.ComboGrid', {
         me.callParent(arguments);	
     },
 
+// copied from ComboBox
+    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,
-        picker,
-        menuCls = Ext.baseCSSPrefix + 'menu',
+        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,
+            }, me.listConfig, me.defaultListConfig);
 
-        opts = Ext.apply({
-            selModel: {
-                mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
+        picker = me.picker || Ext.widget(pickerCfg);
+
+        if (picker.getStore() !== me.store) {
+            picker.bindStore(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);
+                }
             },
-            floating: true,
-            hidden: true,
-            ownerCt: me.ownerCt,
-            cls: me.el.up('.' + menuCls) ? menuCls : '',
-            store: me.store,
-            displayField: me.displayField,
-            focusOnToFront: false,
-            pageSize: me.pageSize
-        }, me.listConfig, me.defaultListConfig);
-
-	// NOTE: we simply use a grid panel
-        //picker = me.picker = Ext.create('Ext.view.BoundList', opts);
-	picker = me.picker = Ext.create('Ext.grid.Panel', opts);
-
-	// pass getNode() to the view
-	picker.getNode = function() {
-	    picker.getView().getNode(arguments);
-	};
-
-        me.mon(picker, {
-            itemclick: me.onItemClick,
-            refresh: me.onListRefresh,
-	    show: function() {
-		me.syncSelection();
-	    },
             scope: me
         });
 
-        me.mon(picker.getSelectionModel(), 'selectionchange', me.onListSelectionChange, me);
+        picker.getNavigationModel().navigateOnSpace = false;
 
         return picker;
     },
@@ -80,6 +219,11 @@ Ext.define('PVE.form.ComboGrid', {
 
         me.callParent();
 
+        // Create the picker at an early stage, so it is available to store the previous selection
+        if (!me.picker) {
+            me.createPicker();
+        }
+
 	me.store.on('beforeload', function() {	 
 	    if (!me.isDisabled()) {
 		me.setDisabled(true);
-- 
2.1.4





More information about the pve-devel mailing list