autocomplete with extjs :ComboBox with REMOTE query store

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

}