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