PDA

View Full Version : ExtJS combobox autocomplete hitting store's URL



KnowledgeSeeker
17 Jun 2014, 11:32 PM
I have a combobox on a view. I am loading data from store. The code for combobox is as follows:


xtype: 'combobox',
fieldLabel: 'Department',
store: Ext.create('UGCApp.store.Department'),
emptyText: 'Select Department',
allowBlank: false,
name: 'departmentId',
displayField: 'departmentName',
valueField: 'departmentId',
flex: 1,
queryMode: 'local'


This is the code for the store:



Ext.define('UGCApp.store.Department', {
extend: 'Ext.data.Store',
storeId: "departmentlist",
model: 'UGCApp.model.Department',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'localhost/UGCApplication/api/getdepartmentlist',
method: 'GET'
}
});


The issue is when I type anything inside the combobox. It is supposed to get the list from the available records from the store. Instead of this behavior, whenever I type a letter, the store's URL is hit and it generates an error at the server side. I need to load the data inside the combobox from store and whenever any letter or word is typed the autocomplete should search the data from the loaded store locally. It should not hit the server.

undeclared
18 Jun 2014, 8:25 AM
set 'enableRegex' to true in the combobox, which will work, however it is case sensitive..

The following override gets rid of case sensitive, and could easily be improved to make it optionally case sensitive instead of always:


Ext.form.ComboBox.override({
doLocalQuery: function(queryPlan) {
var me = this,
queryString = queryPlan.query;




if (!me.queryFilter) {


me.queryFilter = new Ext.util.Filter({
id: me.id + '-query-filter',
anyMatch: me.anyMatch,
caseSensitive: me.caseSensitive,
root: 'data',
property: me.displayField
});
me.store.addFilter(me.queryFilter, false);
}




if (queryString || !queryPlan.forceAll) {
me.queryFilter.disabled = false;
me.queryFilter.setValue(me.enableRegEx ? new RegExp(queryString, 'i') : queryString);
}




else {
me.queryFilter.disabled = true;
}




me.store.filter();




if (me.store.getCount()) {
me.expand();
} else {
me.collapse();
}


me.afterQuery(queryPlan);
}
});