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

Posted 2023-02-26

【中文标题】如何让组合框选择与 ExtJS6 中显示的值不同的值？

【英文标题】：How to have combobox to select different value than displayed in ExtJS6?

【发布时间】：2016-03-23 23:51:47

【问题描述】：

我有一个基本组合框链接到具有 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,
,

【参考方案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);
    
);

这将是组合配置

    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

【讨论】：

对选项 2 的 displayTpl 进行小幅更改以更好地适应可编辑值，否则在商店重新加载时将清除当前值：'[typeof values === "string" ? values : (typeof values["name"] === "undefined" ? values["id"] : values["name"])]'

【参考方案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

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