Search code examples
javascriptstoreextjs3

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


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'}
  ]
});

Solution

  • 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();
        }
      }
    });