title: autocomplete with extjs :ComboBox with REMOTE query store
body: <p>I want to use ComboBox with REMOTE query , </p>
  
  <p>I work with extjs 4,</p>
  
  <p>I want to do autocomplete with combobox</p>
  
  <p>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</p>
  
  <p>I found some example which use  <code>queryMode: 'remote',</code> and <code>hideTrigger:true</code></p>
  
  <p>this some of link which I found </p>
  
  <pre><code>http://demo.mysamplecode.com/ExtJs/pages/comboBoxes.jsp
  </code></pre>
  
  <p>currently I have this code which fill out a combo with traditional way</p>
  
  <p>in my <strong>emplyeesModel.js</strong>  I have </p>
  
  <pre><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'
      });
  </code></pre>
  
  <p>in my <code>emplyeesView.js</code>  I have </p>
  
  <pre><code>function fillEmployeesCombo() {
          employeesService.getEmployeesList({
              callback:function(employeesList){   
  
                  for(var i=0; i&lt;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'
  
                                      }
                  ]
              },
          ] 
      }); 
  </code></pre>
  
  <p>in <code>employeesService.java</code> I have</p>
  
  <pre><code>public List&lt;employees&gt; getEmployeesList() {
          // TODO Auto-generated method stub
  
          Query query = getSession().createQuery("FROM employees emp ");  
          List result = query.list();
          if(result.size()!=0 &amp;&amp; result !=null)
              return result;
          else 
              return null;
      }
  </code></pre>
  
  <p>but actually I will change my code in :<strong>emplyeesView.js</strong></p>
  
  <p>I will have this kind of code :</p>
  
  <pre><code>xtype: 'combobox',
                                              store: employeesStore,
                                              displayField: 'label',
                                              valueField: 'value',
                                              queryMode: 'remote',
                                              fieldLabel: 'test',
                                              editable: false,
                                              id: 'employees_IdCombo',
                                                                                 hideTrigger:true
  </code></pre>
  
  <p>also I think in <strong>emplyeesModel.js</strong>  I should add this notion :</p>
  
  <pre><code> proxy: {
          type: 'ajax',.......
  </code></pre>
  
  <p>I think that in order to finish my example I should use a servlet </p>
  
  <p>meaning fo example :</p>
  
  <pre><code> proxy: {
          type: 'ajax',
          url: 'EmployeesServlet',...
  </code></pre>
  
  <p>can someone help me to correct my code</p>
  
  <p>I try with this code :</p>
  
  <pre><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&lt;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&lt;employees&gt; 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 &amp;&amp; result !=null)
                  return result;
              else 
                  return null;
          }
  </code></pre>
  
  <p>juste I want to know want if this url is correct or no</p>
  
  <pre><code>  url: 'employeesService,
  </code></pre>