ExtJS 3.4, remove white spaces during combo(i.e.Ext.form.ComboBox) search using remote mode

Question

I am using extJS 3.4. There is a Combo(i.e. Ext.form.ComboBox) having remote search(i.e mode is 'remote'). When I enter a search text and add a space at the end, space appended text/string passed to an API which results in wrong response data hence I have to restrict it from front-end.
Is there any way to remove white spaces from the search term?

Here is my combobox code:

var productCombo = new Ext.form.ComboBox({
   fieldLabel: 'Product',
   name: 'product',
   lazyRender: true,
   store: productSearchStore,
   triggerClass: 'x-form-search-trigger',
   pageSize: 100,
   typeAhead: true,
   queryParam: 'term',
   mode: 'remote',
   minChars: 2,
   forceSelection: true,
   width: 400,
   displayField: 'display',
   valueField: 'id',
   listWidth: 500
});

And this is my store as follows:

var productSearchStore = new Ext.data.JsonStore({
  proxy: new Ext.data.HttpProxy({
    method: 'GET',
    url: 'my API url here',
    restful: true
  }),
  root: 'data',
  defaultParamNames : {
    start : 'offset',
    limit : 'limit',
    sort : 'sort',
    dir : 'dir'
  },
  baseParams: {
    '_format': 'json'
  },
  fields: [
    {name: 'productName', type: 'string'},
    {name: 'productValue', type: 'string'},
    {name: 'productDescription', type: 'string'},
    {name: 'id', type: 'integer'},
    {name: 'productNumber', type: 'string'},
    {name: 'productSection', type: 'string'}
  ]
});

@NishantBajracharya, it is there, please check the combobox code which I have added in my question. — Sandy....., Jun 29 '18 at 07:19
use the trim() to remove the trailing space in the combo value before sending the value to the API — Nishant Bajracharya, Jul 03 '18 at 07:17
@ Nishant Bajracharya, there is no AjaxRequest used. Everything is managed though the store and I am not getting how to deal with the store for handling this. If you know, please share the same. — Sandy....., Jul 03 '18 at 07:22
@ Sandip Lipane-> can you also add the store and model in the above code example — Nishant Bajracharya, Jul 03 '18 at 07:27
instead of mode use queryMode and set it to local instead of remote this might be what you are looking for.. there is no property like mode for combobox — Nishant Bajracharya, Jul 03 '18 at 09:54
Thanks @Nishant Bajracharya, for suggesting possible solutions but as I am using extjs 3.4 and it can have mode config there for Ext.form.ComboBoxView. I have updated my question and added my store code. Please check the same. — Sandy....., Jul 03 '18 at 10:30

score 0 · Accepted Answer · answered Jul 10 '18 at 10:43

Finally, I manage to resolve the issue. Added a listener to productSearchStore and inside the "beforeload" function need to trim the term(param) as follows:

listeners: {
   'beforeload': function (store) {
       store.baseParams.term = store.baseParams.term.trim();
   }
}

Please find working example with updated store code as follows:

var productSearchStore = new Ext.data.JsonStore({
  proxy: new Ext.data.HttpProxy({
    method: 'GET',
    url: 'my API url here',
    restful: true
  }),
  root: 'data',
  defaultParamNames : {
    start : 'offset',
    limit : 'limit',
    sort : 'sort',
    dir : 'dir'
  },
  baseParams: {
    '_format': 'json'
  },
  fields: [
    {name: 'productName', type: 'string'},
    {name: 'productValue', type: 'string'},
    {name: 'productDescription', type: 'string'},
    {name: 'id', type: 'integer'},
    {name: 'productNumber', type: 'string'},
    {name: 'productSection', type: 'string'}
  ],
  listeners: { //need to add this code
    'beforeload': function (store) {
        store.baseParams.term = store.baseParams.term.trim();
    }
  }
});

ExtJS 3.4, remove white spaces during combo(i.e.Ext.form.ComboBox) search using remote mode

1 Answers1