autocomplete with extjs :ComboBox with REMOTE query store - extjs4

Question

I want to use ComboBox with REMOTE query ,
I work with extjs 4,
I want to do autocomplete with combobox
meaning when I entered a text in the combobox a request will send to database in order to display a list of emplyees ( in my case ) according to text entered in the combobox
I found some example which use queryMode: 'remote', and hideTrigger:true
this some of link which I found
http://demo.mysamplecode.com/ExtJs/pages/comboBoxes.jsp
currently I have this code which fill out a combo with traditional way
in my emplyeesModel.js I have
Ext.define('GenericComboModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'label', type: 'string'},
{name: 'value', type: 'string'}
]
});
var employeesStore= Ext.create('Ext.data.Store', {
model: 'GenericComboModel'
});
in my emplyeesView.js I have
function fillEmployeesCombo() {
employeesService.getEmployeesList({
callback:function(employeesList){
for(var i=0; i<employeesList.length; i++){
var employeesLabel = employeesList[i].libelleEmployees;
var employeesId = employeesList[i].idEmployees;
employeesStore.add({label: employeesLabel , value: employeesId });
}
}
});
}
var employeesPanel = Ext.create('Ext.panel.Panel', {
title: 'test',
bodyPadding: 5,
width: '100%',
height: '100%',
autoScroll: true,
id: 'tab_Employees',
layout: 'anchor',
defaults: {
anchor: '100%'
},
defaultType: 'textfield',
items:
[
{
xtype: 'container',
layout: {
type: 'hbox'
},
padding: '5 5 5 5',
items:
[
{
xtype: 'combobox',
store: employeesStore,
displayField: 'label',
valueField: 'value',
queryMode: 'local',
fieldLabel: 'test',
editable: false,
id: 'employees_IdCombo'
}
]
},
]
});
in employeesService.java I have
public List<employees> getEmployeesList() {
// TODO Auto-generated method stub
Query query = getSession().createQuery("FROM employees emp ");
List result = query.list();
if(result.size()!=0 && result !=null)
return result;
else
return null;
}
but actually I will change my code in :emplyeesView.js
I will have this kind of code :
xtype: 'combobox',
store: employeesStore,
displayField: 'label',
valueField: 'value',
queryMode: 'remote',
fieldLabel: 'test',
editable: false,
id: 'employees_IdCombo',
hideTrigger:true
also I think in emplyeesModel.js I should add this notion :
proxy: {
type: 'ajax',.......
I think that in order to finish my example I should use a servlet
meaning fo example :
proxy: {
type: 'ajax',
url: 'EmployeesServlet',...
can someone help me to correct my code
I try with this code :
Ext.define('GenericComboModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'label', type: 'string'},
{name: 'value', type: 'string'}
]
});
var employeesStore= Ext.create('Ext.data.Store', {
model: 'GenericComboModel',
proxy: {
type: 'ajax',
url: 'employeesService',
reader: {
type: 'json',
root: 'users'
}
}
});
//Finally your combo looks like this
{
xtype: 'combobox',
store: employeesStore,
displayField: 'label',
valueField: 'value',
queryMode: 'remote',
fieldLabel: 'test',
editable: false,
id: 'employees_IdCombo',
hideTrigger:true
queryParam: 'searchStr' //This will be the argument that is going to be passed to your service which you can use this to return your resulkt set
}
function fillEmployeesComboByParam(String Libelle) {
employeesService.getEmployeesList(Libelle){
callback:function(employeesList){
for(var i=0; i<employeesList.length; i++){
var employeesLabel = employeesList[i].libelleEmployees;
var employeesId = employeesList[i].idEmployees;
employeesStore.add({label: employeesLabel , value: employeesId });
}
}
});
}
in `employeesService.java` I have
public List<employees> getEmployeesList(String libelle) {
// TODO Auto-generated method stub
Query query = getSession().createQuery("FROM employees emp where emp.libelle=:libelle ");
query.setParameter("libelle", libelle);
List result = query.list();
if(result.size()!=0 && result !=null)
return result;
else
return null;
}
juste I want to know want if this url is correct or no
url: 'employeesService,

Answer 1

Below are the changes on the extjs, you have to make your service changes to handle searchStr which is passed as queryParam
//Your model remains the same as you defined
Ext.define('GenericComboModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'label', type: 'string'},
{name: 'value', type: 'string'}
]
});
//Your store will look like
var employeesStore= Ext.create('Ext.data.Store', {
model: 'GenericComboModel',
proxy: {
type: 'ajax',
url: 'Your service URL',
reader: {
type: 'json',
root: 'users'
}
}
});
//Finally your combo looks like this
{
xtype: 'combobox',
store: employeesStore,
displayField: 'label',
valueField: 'value',
queryMode: 'remote',
fieldLabel: 'test',
editable: true,
id: 'employees_IdCombo',
hideTrigger:true
queryParam: 'searchStr' //This will be the argument that is going to be passed to your service which you can use this to return your resulkt set
}