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

选项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);
    }
});

这将是combo config

{
    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以使用＆＃34; name＆＃34;属性。除此之外，您还可以删除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

Answer 2

这个怎么样？

{
    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

<强>更新输入时上面的代码看起来不错但是在选择了一些数据之后，由于过滤了它，它无法扩展......

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

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();
    }
},

第二个例子在小提琴中运行：https://fiddle.sencha.com/#fiddle/17ku

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

如何让组合框选择与ExtJS6中显示的值不同的值？

2 个答案: