Combobox query param value send as array

Question

Got combo box like this:

Ext.define('Dropchop.components.form.fields.BaseUnitCombobox', {
  extend: 'Ext.field.ComboBox',

  alias: 'widget.base-unit-combobox',

  store: {
    type: 'base-units-store'
  },

  name: 'baseUnit',

  queryMode: 'remote',
  queryParam: 'name',
  displayField: 'name',
  valueField: 'id',

});

With storage:

Ext.define('Dropchop.store.BaseUnitsStore', {
  extend: 'Ext.data.Store',

  alias: 'store.base-units-store',

  model: 'Dropchop.nutril.model.Unit',

  autoLoad: false,

  proxy: {
    url: Ext.manifest.api + '/public/catalog/units',
    type: 'ajax',
    startParam: '',
    pageParam: '',
    limitParam: '',
    paramsAsJson: true,
    actionMethods: {
      create: 'POST',
      read: 'POST',
      update: 'POST',
      destroy: 'POST'
    },
    reader: {
      type: 'json',
      rootProperty: 'data',
    },
    extraParams: {
      base: true
    }
  }
 
});

This is the request payload that is sent to server:

{"base":true,"name":[null]}

Is there any way to manipulate this payload?
The propper payload I require is:

{"base":true,"name":[]}
or {"base":true} 
or {"base":true,"name":"hello world"}

Been trying with beforeload event on store but name parameter is set in the operation as filter and then that filter values is set as array (like the example above)

Also
When I set value to combo before store is loaded. It triggers store loading but value is not in request payload:

 {"base":true,"name":[null]}

Instead of

 {"base":true,"name":["some value I set on combo"]}

How is this even wroking for anyone?

Any help appreciated.

Regards

Armando

Answer 1

Looks like you are trying to change the parameters sent to the backend code. One thing you note the way you see on the browser network tab differs from what you actually listen in the backend code.

Refer to Sencha Examples here

https://examples.sencha.com/extjs/7.7.0/examples/kitchensink/?classic#remote-combo

You can manipulate store API params as per your wish as it is controlled by user and not completely by the framework.

You could also dynamically set extraParams before calling API:

https://docs.sencha.com/extjs/7.7.0/classic/Ext.data.proxy.Ajax.html#cfg-extraParams

setExtraParams(extraParams) - Sets the value of extraParams