在 ComboBox MultiSelect extjs 上加载数据答案

【问题标题】：Load Data on ComboBox MultiSelect extjs在 ComboBox MultiSelect extjs 上加载数据
【发布时间】：2021-10-20 21:00:21
【问题描述】：

我的水果项目有一个带有多选设置的组合框。

所以在创建用户饮食习惯表格时，用户可以选择多种水果选择，当我编辑用户饮食习惯时出现我的问题，表格无法显示现有的水果选择。

显示在水果组合框创建新的用户表单 - 吃的水果：Apple、Orange
当加载以前的用户时应该与上面的结果相同，但它只是显示为空

组合框中的部分代码是这样的

 {
xtype:'combobox',
fields: 'Fruits Eaten:',
editable: false,
displayField'name',
store:'FruitStore',
valueField:'name',
multiSelect:true
    }

商店模型代码是这个

 Ext.define('FruitModel',{
     extend: 'Ext.data.Model',
    requires:[
    'Ext.data.field.Field'
    ],
    fields:[
    {
    mapping:'_source.name',
    name:'name'
    },
    {
    mapping:'_source.code',
    name:'code'
    }
    ]
    });

通过elasticsearch将水果结果的结果显示到组合框中

{
  "took":3,
  "timed_out":false,
  "_shards":
  {
    "total":1,
    "successful":1,
    "skipped":0,
    "failed":0
  },
  "hits":{
    "total":{
      "value":4,
      "relation":"eq"
    },
    "max_score":1.0,
    "hits":[
      {
        "_index":"fruits",
        "_type":"_doc",
        "_id":1,
        "_score":1.0,
        "_source":{
          "name":"Apple",
          "code":"AP"
        }
      },
      {
        "_index":"fruits",
        "_type":"_doc",
        "_id":2,
        "_score":1.0,
        "_source":{
          "name":"Orange",
          "code":"OR"
        }
      },
      {
        "_index":"fruits",
        "_type":"_doc",
        "_id":3,
        "_score":1.0,
        "_source":{
         "name":"Blueberry",
          "code":"BB"
        }
      },
      {
        "_index":"fruits",
        "_type":"_doc",
        "_id":4,
        "_score":1.0,
        "_source":{
          "name":"Pear",
          "code":"PE"
        }
      }
      ]
  }
}

用户表单结果如下

{
  "took":3,
  "timed_out":false,
  "_shards":
  {
    "total":1,
    "successful":1,
    "skipped":0,
    "failed":0
  },
  "hits":{
    "total":{
      "value":4,
      "relation":"eq"
    },
    "max_score":1.0,
    "hits":[
      {
        "_index":"students",
        "_type":"_doc",
        "_id":1,
        "_score":1.0,
        "_source":{
          "name":"John",
          "fruitseaten":"Apple"
        }
      },
      {
        "_index":"students",
        "_type":"_doc",
        "_id":2,
        "_score":1.0,
        "_source":{
          "name":"Mary",
          "fruitseaten":"Apple,Orange"
        }
      },
      {
        "_index":"students",
        "_type":"_doc",
        "_id":3,
        "_score":1.0,
        "_source":{
         "name":"Karen",
          "fruitseaten":"Blueberry"
        }
      },
      {
        "_index":"students",
        "_type":"_doc",
        "_id":4,
        "_score":1.0,
        "_source":{
          "name":"Sam",
          "fruitseaten":"Pear"
        }
      }
      ]
  }
}

正如我之前对 Sam、Karen 和 John 所说的那样，组合框能够将 Fruitseaten 显示为 show，但对于 Mary，组合框的值为空且选择也为空

【问题讨论】：

您使用哪个 ExtJS 版本和工具包？请包含示例数据。
我使用 EXTJS 7.1.x Classic
你如何存储这些数据？多选组合的值将是一个数组。
我将它存储为字符串。是否可以将运行时的值转换为数组？但我对一些只有一种水果选择的记录感到惊讶，它能够显示和选择
您使用哪个数据库以及您要保存此数据的列的确切数据类型是什么？另外，请举例说明水果的name 和code 值。

标签： extjs multi-select

【解决方案1】：

尝试将后端返回的字符串值转换为数组。在您定义fruitseaten 字段的students 的模型定义中，添加convert 函数：

fields: [
    {
        mapping: '_source.fruitseaten',
        name: 'fruitseaten',
        convert: function(v, record) {
            return v.split(',');
        }
    },
]

【讨论】：

@ngjiajun 很高兴听到，欢迎。还有一点需要注意：multiSelect 配置是 deprecated，因为版本 5.1.0。我建议根据文档尝试tagfield。