src/form/ComboGrid.js

   1 /*
   2  * ComboGrid component: a ComboBox where the dropdown menu (the
   3  * "Picker") is a Grid with Rows and Columns expects a listConfig
   4  * object with a columns property roughly based on the GridPicker from
   5  * https://www.sencha.com/forum/showthread.php?299909
   6  *
   7 */
   8
   9 Ext.define('Proxmox.form.ComboGrid', {
  10     extend: 'Ext.form.field.ComboBox',
  11     alias: ['widget.proxmoxComboGrid'],
  12
  13     // this value is used as default value after load()
  14     preferredValue: undefined,
  15
  16     // hack: allow to select empty value
  17     // seems extjs does not allow that when 'editable == false'
  18     onKeyUp: function(e, t) {
  19         let me = this;
  20         let key = e.getKey();
  21
  22         if (!me.editable && me.allowBlank && !me.multiSelect &&
  23             (key === e.BACKSPACE || key === e.DELETE)) {
  24             me.setValue('');
  25         }
  26
  27         me.callParent(arguments);
  28     },
  29
  30     config: {
  31         skipEmptyText: false,
  32         notFoundIsValid: false,
  33         deleteEmpty: false,
  34     },
  35
  36     // needed to trigger onKeyUp etc.
  37     enableKeyEvents: true,
  38
  39     editable: false,
  40
  41     triggers: {
  42         clear: {
  43             cls: 'pmx-clear-trigger',
  44             weight: -1,
  45             hidden: true,
  46             handler: function() {
  47                 let me = this;
  48                 me.setValue('');
  49             },
  50         },
  51     },
  52
  53     setValue: function(value) {
  54         let me = this;
  55         let empty = Ext.isArray(value) ? !value.length : !value;
  56         me.triggers.clear.setVisible(!empty && me.allowBlank);
  57         return me.callParent([value]);
  58     },
  59
  60     // override ExtJS method
  61     // if the field has multiSelect enabled, the store is not loaded, and
  62     // the displayfield == valuefield, it saves the rawvalue as an array
  63     // but the getRawValue method is only defined in the textfield class
  64     // (which has not to deal with arrays) an returns the string in the
  65     // field (not an array)
  66     //
  67     // so if we have multiselect enabled, return the rawValue (which
  68     // should be an array) and else we do callParent so
  69     // it should not impact any other use of the class
  70     getRawValue: function() {
  71         let me = this;
  72         if (me.multiSelect) {
  73             return me.rawValue;
  74         } else {
  75             return me.callParent();
  76         }
  77     },
  78
  79     getSubmitData: function() {
  80         let me = this;
  81
  82         let data = null;
  83         if (!me.disabled && me.submitValue) {
  84             let val = me.getSubmitValue();
  85             if (val !== null) {
  86                 data = {};
  87                 data[me.getName()] = val;
  88             } else if (me.getDeleteEmpty()) {
  89                 data = {};
  90                 data.delete = me.getName();
  91             }
  92         }
  93         return data;
  94    },
  95
  96     getSubmitValue: function() {
  97         let me = this;
  98
  99         let value = me.callParent();
 100         if (value !== '') {
 101             return value;
 102         }
 103
 104         return me.getSkipEmptyText() ? null: value;
 105     },
 106
 107     setAllowBlank: function(allowBlank) {
 108         this.allowBlank = allowBlank;
 109         this.validate();
 110     },
 111
 112 // override ExtJS protected method
 113     onBindStore: function(store, initial) {
 114         let me = this,
 115             picker = me.picker,
 116             extraKeySpec,
 117             valueCollectionConfig;
 118
 119         // We're being bound, not unbound...
 120         if (store) {
 121             // If store was created from a 2 dimensional array with generated field names 'field1' and 'field2'
 122             if (store.autoCreated) {
 123                 me.queryMode = 'local';
 124                 me.valueField = me.displayField = 'field1';
 125                 if (!store.expanded) {
 126                     me.displayField = 'field2';
 127                 }
 128
 129                 // displayTpl config will need regenerating with the autogenerated displayField name 'field1'
 130                 me.setDisplayTpl(null);
 131             }
 132             if (!Ext.isDefined(me.valueField)) {
 133                 me.valueField = me.displayField;
 134             }
 135
 136             // Add a byValue index to the store so that we can efficiently look up records by the value field
 137             // when setValue passes string value(s).
 138             // The two indices (Ext.util.CollectionKeys) are configured unique: false, so that if duplicate keys
 139             // are found, they are all returned by the get call.
 140             // This is so that findByText and findByValue are able to return the *FIRST* matching value. By default,
 141             // if unique is true, CollectionKey keeps the *last* matching value.
 142             extraKeySpec = {
 143                 byValue: {
 144                     rootProperty: 'data',
 145                     unique: false,
 146                 },
 147             };
 148             extraKeySpec.byValue.property = me.valueField;
 149             store.setExtraKeys(extraKeySpec);
 150
 151             if (me.displayField === me.valueField) {
 152                 store.byText = store.byValue;
 153             } else {
 154                 extraKeySpec.byText = {
 155                     rootProperty: 'data',
 156                     unique: false,
 157                 };
 158                 extraKeySpec.byText.property = me.displayField;
 159                 store.setExtraKeys(extraKeySpec);
 160             }
 161
 162             // We hold a collection of the values which have been selected, keyed by this field's valueField.
 163             // This collection also functions as the selected items collection for the BoundList's selection model
 164             valueCollectionConfig = {
 165                 rootProperty: 'data',
 166                 extraKeys: {
 167                     byInternalId: {
 168                         property: 'internalId',
 169                     },
 170                     byValue: {
 171                         property: me.valueField,
 172                         rootProperty: 'data',
 173                     },
 174                 },
 175                 // Whenever this collection is changed by anyone, whether by this field adding to it,
 176                 // or the BoundList operating, we must refresh our value.
 177                 listeners: {
 178                     beginupdate: me.onValueCollectionBeginUpdate,
 179                     endupdate: me.onValueCollectionEndUpdate,
 180                     scope: me,
 181                 },
 182             };
 183
 184             // This becomes our collection of selected records for the Field.
 185             me.valueCollection = new Ext.util.Collection(valueCollectionConfig);
 186
 187             // We use the selected Collection as our value collection and the basis
 188             // for rendering the tag list.
 189
 190             //proxmox override: since the picker is represented by a grid panel,
 191             // we changed here the selection to RowModel
 192             me.pickerSelectionModel = new Ext.selection.RowModel({
 193                 mode: me.multiSelect ? 'SIMPLE' : 'SINGLE',
 194                 // There are situations when a row is selected on mousedown but then the mouse is
 195                 // dragged to another row and released.  In these situations, the event target for
 196                 // the click event won't be the row where the mouse was released but the boundview.
 197                 // The view will then determine that it should fire a container click, and the
 198                 // DataViewModel will then deselect all prior selections. Setting
 199                 // `deselectOnContainerClick` here will prevent the model from deselecting.
 200                 deselectOnContainerClick: false,
 201                 enableInitialSelection: false,
 202                 pruneRemoved: false,
 203                 selected: me.valueCollection,
 204                 store: store,
 205                 listeners: {
 206                     scope: me,
 207                     lastselectedchanged: me.updateBindSelection,
 208                 },
 209             });
 210
 211             if (!initial) {
 212                 me.resetToDefault();
 213             }
 214
 215             if (picker) {
 216                 picker.setSelectionModel(me.pickerSelectionModel);
 217                 if (picker.getStore() !== store) {
 218                     picker.bindStore(store);
 219                 }
 220             }
 221         }
 222     },
 223
 224     // copied from ComboBox
 225     createPicker: function() {
 226         let me = this;
 227         let picker;
 228
 229         let pickerCfg = Ext.apply({
 230                 // proxmox overrides: display a grid for selection
 231                 xtype: 'gridpanel',
 232                 id: me.pickerId,
 233                 pickerField: me,
 234                 floating: true,
 235                 hidden: true,
 236                 store: me.store,
 237                 displayField: me.displayField,
 238                 preserveScrollOnRefresh: true,
 239                 pageSize: me.pageSize,
 240                 tpl: me.tpl,
 241                 selModel: me.pickerSelectionModel,
 242                 focusOnToFront: false,
 243             }, me.listConfig, me.defaultListConfig);
 244
 245         picker = me.picker || Ext.widget(pickerCfg);
 246
 247         if (picker.getStore() !== me.store) {
 248             picker.bindStore(me.store);
 249         }
 250
 251         if (me.pageSize) {
 252             picker.pagingToolbar.on('beforechange', me.onPageChange, me);
 253         }
 254
 255         // proxmox overrides: pass missing method in gridPanel to its view
 256         picker.refresh = function() {
 257             picker.getSelectionModel().select(me.valueCollection.getRange());
 258             picker.getView().refresh();
 259         };
 260         picker.getNodeByRecord = function() {
 261             picker.getView().getNodeByRecord(arguments);
 262         };
 263
 264         // We limit the height of the picker to fit in the space above
 265         // or below this field unless the picker has its own ideas about that.
 266         if (!picker.initialConfig.maxHeight) {
 267             picker.on({
 268                 beforeshow: me.onBeforePickerShow,
 269                 scope: me,
 270             });
 271         }
 272         picker.getSelectionModel().on({
 273             beforeselect: me.onBeforeSelect,
 274             beforedeselect: me.onBeforeDeselect,
 275             focuschange: me.onFocusChange,
 276             selectionChange: function(sm, selectedRecords) {
 277                 if (selectedRecords.length) {
 278                     this.setValue(selectedRecords);
 279                     this.fireEvent('select', me, selectedRecords);
 280                 }
 281             },
 282             scope: me,
 283         });
 284
 285         // hack for extjs6
 286         // when the clicked item is the same as the previously selected,
 287         // it does not select the item
 288         // instead we hide the picker
 289         if (!me.multiSelect) {
 290             picker.on('itemclick', function(sm, record) {
 291                 if (picker.getSelection()[0] === record) {
 292                     picker.hide();
 293                 }
 294             });
 295         }
 296
 297         // when our store is not yet loaded, we increase
 298         // the height of the gridpanel, so that we can see
 299         // the loading mask
 300         //
 301         // we save the minheight to reset it after the load
 302         picker.on('show', function() {
 303             if (me.enableLoadMask) {
 304                 me.savedMinHeight = picker.getMinHeight();
 305                 picker.setMinHeight(100);
 306             }
 307             if (me.loadError) {
 308                 Proxmox.Utils.setErrorMask(picker, me.loadError);
 309                 delete me.loadError;
 310                 picker.updateLayout();
 311             }
 312         });
 313
 314         picker.getNavigationModel().navigateOnSpace = false;
 315
 316         return picker;
 317     },
 318
 319     clearLocalFilter: function() {
 320         let me = this,
 321             filter = me.queryFilter;
 322
 323         if (filter) {
 324             me.queryFilter = null;
 325             me.changingFilters = true;
 326             me.store.removeFilter(filter, true);
 327             me.changingFilters = false;
 328         }
 329     },
 330
 331     isValueInStore: function(value) {
 332         let me = this;
 333         let store = me.store;
 334         let found = false;
 335
 336         if (!store) {
 337             return found;
 338         }
 339
 340         // Make sure the current filter is removed before checking the store
 341         // to prevent false negative results when iterating over a filtered store.
 342         // All store.find*() method's operate on the filtered store.
 343         if (me.queryFilter && me.queryMode === 'local' && me.clearFilterOnBlur) {
 344             me.clearLocalFilter();
 345         }
 346
 347         if (Ext.isArray(value)) {
 348             Ext.Array.each(value, function(v) {
 349                 if (store.findRecord(me.valueField, v, 0, false, true, true)) {
 350                     found = true;
 351                     return false; // break
 352                 }
 353                 return true;
 354             });
 355         } else {
 356             found = !!store.findRecord(me.valueField, value, 0, false, true, true);
 357         }
 358
 359         return found;
 360     },
 361
 362     validator: function(value) {
 363         let me = this;
 364
 365         if (!value) {
 366             return true; // handled later by allowEmpty in the getErrors call chain
 367         }
 368
 369         // we normally get here the displayField as value, but if a valueField
 370         // is configured we need to get the "actual" value, to ensure it is in
 371         // the store. Below check is copied from ExtJS 6.0.2 ComboBox source
 372         //
 373         // we also have to get the 'real' value if the we have a mulitSelect
 374         // Field but got a non array value
 375         if ((me.valueField && me.valueField !== me.displayField) ||
 376             (me.multiSelect && !Ext.isArray(value))) {
 377             value = me.getValue();
 378         }
 379
 380         if (!(me.notFoundIsValid || me.isValueInStore(value))) {
 381             return gettext('Invalid Value');
 382         }
 383
 384         return true;
 385     },
 386
 387     // validate after enabling a field, otherwise blank fields with !allowBlank
 388     // are sometimes not marked as invalid
 389     setDisabled: function(value) {
 390         this.callParent([value]);
 391         this.validate();
 392     },
 393
 394     initComponent: function() {
 395         let me = this;
 396
 397         Ext.apply(me, {
 398             queryMode: 'local',
 399             matchFieldWidth: false,
 400         });
 401
 402         Ext.applyIf(me, { value: '' }); // hack: avoid ExtJS validate() bug
 403
 404         Ext.applyIf(me.listConfig, { width: 400 });
 405
 406         me.callParent();
 407
 408         // Create the picker at an early stage, so it is available to store the previous selection
 409         if (!me.picker) {
 410             me.createPicker();
 411         }
 412
 413         me.mon(me.store, 'beforeload', function() {
 414             if (!me.isDisabled()) {
 415                 me.enableLoadMask = true;
 416             }
 417         });
 418
 419         // hack: autoSelect does not work
 420         me.mon(me.store, 'load', function(store, r, success, o) {
 421             if (success) {
 422                 me.clearInvalid();
 423                 delete me.loadError;
 424
 425                 if (me.enableLoadMask) {
 426                     delete me.enableLoadMask;
 427
 428                     // if the picker exists, we reset its minHeight to the previous saved one or 0
 429                     if (me.picker) {
 430                         me.picker.setMinHeight(me.savedMinHeight || 0);
 431                         Proxmox.Utils.setErrorMask(me.picker);
 432                         delete me.savedMinHeight;
 433                         // we have to update the layout, otherwise the height gets not recalculated
 434                         me.picker.updateLayout();
 435                     }
 436                 }
 437
 438                 let def = me.getValue() || me.preferredValue;
 439                 if (def) {
 440                     me.setValue(def, true); // sync with grid
 441                 }
 442                 let found = false;
 443                 if (def) {
 444                     found = me.isValueInStore(def);
 445                 }
 446
 447                 if (!found) {
 448                     if (!(Ext.isArray(def) ? def.length : def)) {
 449                         let rec = me.store.first();
 450                         if (me.autoSelect && rec && rec.data) {
 451                             def = rec.data[me.valueField];
 452                             me.setValue(def, true);
 453                         } else if (!me.allowBlank) {
 454                             me.setValue(def);
 455                             if (!me.isDisabled()) {
 456                                 me.markInvalid(me.blankText);
 457                             }
 458                         }
 459                     } else if (!me.notFoundIsValid && !me.isDisabled()) {
 460                         me.markInvalid(gettext('Invalid Value'));
 461                     }
 462                 }
 463             } else {
 464                 let msg = Proxmox.Utils.getResponseErrorMessage(o.getError());
 465                 if (me.picker) {
 466                     Proxmox.Utils.setErrorMask(me.picker, msg);
 467                 }
 468                 me.loadError = msg;
 469             }
 470         });
 471     },
 472 });