EXT JS 破坏 xtype 上的输入字段值：'combo'答案

【问题标题】：EXT JS destroying inputfield value on xtype: 'combo'EXT JS 破坏 xtype 上的输入字段值：'combo'
【发布时间】：2014-03-26 01:06:11
【问题描述】：

如果用户输入值未在 Xtype:'combo' 的下拉列表中的商店中返回，则 EXTJS 会破坏用户输入值。

如果它不在商店中，我需要它来保留该值，因为我想将其用作电子邮件地址的总搜索字段。

我也试过 forceSelection: false 也没有成功。

代码：

     {
                  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();

                         }
                      }
                  }

从商店调用的服务：

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

StoreModel 看起来像：

 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'
    }
}
});

【问题讨论】：

标签： extjs extjs4.2

【解决方案1】：

您似乎从 change 事件中重新加载了相应的 store。对服务器的远程查询被烘焙到combobox。

您可以在组合框定义中指定queryMode:"remote"，不需要监听器。

{
                  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();

                  //       }
                  //    }
                  //}

查看浏览器网络选项卡中的请求，您将看到一个请求触发，其参数在query 中指定。设置您的服务器端代码以读取该参数 (query)。

更多信息请访问sencha docs

【讨论】：

做到了！我最终在模型中使用了：Context.Request.Params.Get("query") 并且作品喜欢 Window 的 8 魅力。