如何使组合框的值 select 不同于 ExtJS6 中显示的值？

Question

我有一个链接到商店的基本组合框，其中包含 3 个字段：id、name 和 description。我试图让组合框表现得像这样：

组合框展开时 description 会显示
输入时 description 可搜索
当用户从列表中选择任何项目时显示name
有id作为组合框的内部值

以下配置几乎解决了所有问题，除了 description 可搜索：

{
    xtype: 'combo',
    queryMode: 'local',
    triggerAction: 'all',
    forceSelection: false,
    editable: true,
    anyMatch: true,
    valueField: 'id',
    displayField: 'name',
    listConfig: {
        itemTpl: '{description}'
    },
    store: store,
},

Answer 1

这个怎么样？

{
    xtype: 'combo',
    queryMode: 'local',
    triggerAction: 'all',
    forceSelection: false,
    editable: true,
    anyMatch: true,
    valueField: 'id',
    displayField: 'name',
    listConfig: {
        itemTpl: '{description}'
    },
    store: store,
    listeners: {
        change: function() {
          var store = this.store;
          store.clearFilter();
          store.filter({
              property: 'description',
              anyMatch: true,
              value   : this.getRawValue()
          });

          this.expand();
        }
    }
},

https://fiddle.sencha.com/#fiddle/17ks

更新： 上面的代码在输入时看起来不错。
但是在select一些数据之后，由于被过滤，它无法展开...

我也试过下面的代码。第二个例子。

listeners: {
    keyup: function() {
      var store = this.store;
      store.clearFilter();
      store.filter({
          property: 'description',
          anyMatch: true,
          value   : this.getRawValue()
      });

      this.expand();
    },
    collapse: function() {
      var store = this.store;
      // Reset filter here.
      store.clearFilter();
    }
},

第二个示例运行在 fiddle：https://fiddle.sencha.com/#fiddle/17ku

我觉得第二个代码比第一个好。但它也不能完美地工作...

Answer 2

选项 1：

您可以覆盖 Combobox - doLocalQuery 方法并添加对另一个属性方法的支持，例如 searchField。我在此方法中所做的唯一更改是将 property: me.displayField, 替换为

property: me.searchField || me.displayField,

如果配置了 searchField，那么它将使用搜索字段，否则它将回退到常规 displayField。

Ext.define('App.override.form.field.ComboBox', {
    override: 'Ext.form.field.ComboBox',


    doLocalQuery: function(queryPlan) {
        var me = this,
            queryString = queryPlan.query,
            store = me.getStore(),
            filter = me.queryFilter;

        me.queryFilter = null;

        // Must set changingFilters flag for this.checkValueOnChange.
        // the suppressEvents flag does not affect the filterchange event
        me.changingFilters = true;
        if (filter) {
            store.removeFilter(filter, true);
        }

        // Querying by a string...
        if (queryString) {
            filter = me.queryFilter = new Ext.util.Filter({
                id: me.id + '-filter',
                anyMatch: me.anyMatch,
                caseSensitive: me.caseSensitive,
                root: 'data',
                // use searchField if available or fallback to displayField
                property: me.searchField || me.displayField,
                value: me.enableRegEx ? new RegExp(queryString) : queryString
            });
            store.addFilter(filter, true);
        }
        me.changingFilters = false;

        // Expand after adjusting the filter if there are records or if emptyText is configured.
        if (me.store.getCount() || me.getPicker().emptyText) {
            // The filter changing was done with events suppressed, so
            // refresh the picker DOM while hidden and it will layout on show.
            me.getPicker().refresh();
            me.expand();
        } else {
            me.collapse();
        }

        me.afterQuery(queryPlan);
    }
});

这将是组合配置

{
    xtype: 'combo',
    queryMode: 'local',
    triggerAction: 'all',
    forceSelection: false,
    editable: true,
    anyMatch: true,
    valueField: 'id',
    displayField: 'name',
    searchField: 'description',
    listConfig: {
        itemTpl: '{description}'
    },
    store: store,
},

https://fiddle.sencha.com/#fiddle/17lc

选项 2：

将 displayField 配置为描述，只需将 displayTpl 配置为使用 "name" 属性。此外，您还可以删除 listConfig。

{
    xtype: 'combo',
    queryMode: 'local',
    triggerAction: 'all',
    forceSelection: false,
    editable: true,
    anyMatch: true,
    valueField: 'id',
    displayField: 'description',
    displayTpl: new Ext.XTemplate(
        '<tpl for=".">' +
        '{[typeof values === "string" ? values : values["name"]]}' +
        '</tpl>'
    ),
    store: store,
}

https://fiddle.sencha.com/#fiddle/17ld

如何使组合框的值 select 不同于 ExtJS6 中显示的值？

How to have combobox to select different value than displayed in ExtJS6?

extjs

extjs6