EXT JS destroying inputfield value on xtype: 'combo'

Question

Having an issue with EXTJS destroying the user input value if it is not returned in the store on a dropDown list for a Xtype: 'combo'.

I need it to keep the value if it is not in the store as I want to use this as a total search field for e-mail address.

I tried forceSelection: false without success too.

Code:

     {
                  xtype: 'combo',
                  itemId: 'totalSearchCombo',
                  width: 200,
                  emptyText: 'Total Search',
                  typeAhead: true,
                  editable: true,
                  hideLabel: true,
                  hideTrigger: true,
                  store: 'dropDownList_s',
                  displayField: 'display_name',
                  anchor: '100%',
                  matchFieldWidth: false,
                  listConfig:
                      {
                          width: 195,
                          loadingText: 'Searching...',
                          emptyText: 'No matching items found, or not enough characters entered.',
                          getInnerTpl: function () {
                              var tpl = '<div>{display_name}</div>';
                              return tpl;
                          }
                      },
                  //pageSize: 15,
                  listeners: {
                      //FILTER THE APP LIST IF THE SEARCH FIELD HAS AT LEAST 3 CHARACTERS
                      change: function () {

                         if (Ext.ComponentQuery.query('combobox')[0].getValue().length > 2) {

                             var filterValue = Ext.ComponentQuery.query('combobox')[0].getValue();
                             var s = Ext.data.StoreManager.lookup('dropDownList_s');
                             s.proxy.extraParams.action = 'searchForUser';
                             s.proxy.extraParams.memName = filterValue;
                             s.load();

                         }
                      }
                  }

The service called from the store:

 SQL = "SELECT a.member, userNumber, a.member_nm display_name " +
            "FROM dbo.member_grps a " +
            "WHERE member_name like ('%" + memName + "%') ";

StoreModel looks like:

 Ext.define('App.model.dropDownList_m', {
extend: 'Ext.data.Model',
fields: [
{ name: "member", type: "auto" },
{ name: "userNumber", type: "auto" },
{ name: "display_name", type: "auto" }],
 proxy: {
    type: 'jsonp',
    timeout: 240000,
    url: 'http:// .......',
    extraParams: {
        'action': 'searchForUser',
        'memName': '',
        'userName': ''
    },
    reader: {
        type: 'json',
        root: 'data'
    }
}
});

Answer 1

It looks like you reloading the corresponding store from the change event. Remote queries to server are baked into the combobox.

You can specify queryMode:"remote" in the combobox definition and the listener isn't required.

{
                  xtype: 'combo',
                  itemId: 'totalSearchCombo',
                  width: 200,
                  emptyText: 'Total Search',
                  typeAhead: true,
                  editable: true,
                  hideLabel: true,
                  hideTrigger: true,
                  store: 'dropDownList_s',
                  displayField: 'display_name',
                  anchor: '100%',
                  matchFieldWidth: false,
                  queryMode:'remote',
                  listConfig:
                      {
                          width: 195,
                          loadingText: 'Searching...',
                          emptyText: 'No matching items found, or not enough characters entered.',
                          getInnerTpl: function () {
                              var tpl = '<div>{display_name}</div>';
                              return tpl;
                          }
                      },
                  //pageSize: 15,
                  //listeners: {
                  //    //FILTER THE APP LIST IF THE SEARCH FIELD HAS AT LEAST 3 CHARACTERS
                  //    change: function () {

                  //       if (Ext.ComponentQuery.query('combobox')[0].getValue().length > 2) {

                  //           var filterValue = Ext.ComponentQuery.query('combobox')[0].getValue();
                  //           var s = Ext.data.StoreManager.lookup('dropDownList_s');
                  //           s.proxy.extraParams.action = 'searchForUser';
                  //           s.proxy.extraParams.memName = filterValue;
                  //           s.load();

                  //       }
                  //    }
                  //}

Take a look at the request in the browser's network tab and you will see a request fire with the parameter specified in query. Set up your server-side code to read from that parameter (query).

More info available in sencha docs