[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