EXTJS 5 在存储中加载一个非常简单的字符串数组

Question

我有一个后端服务，它给了我一个只包含一个字符串数组的对象。 例如，这是服务给我的：

{  
  "DepartementsResult": [
    "AME-CM",
    "BMAU",
    "BMKR",
    "BNVS"
  ]
}

所以为了获取这些数据，我想创建一个漂亮而简单的商店，但出现了第一个问题：该字段应该是什么？？？

var store = Ext.create('Ext.data.Store', {
    fields: ['data'], // What should be the fields here, I have none ^^"
    pageSize: 0,
    autoLoad: false,
    proxy: {
        type: 'ajax',
        url: 'data.json', // this file contains the data described above
        reader: {
            type: 'json',
            rootProperty: 'DepartementsResult'
        }
    }
});

然后当我想使用这家商店创建一个组合时，我也不知道我应该写什么：

var combo = Ext.create('Ext.form.field.ComboBox', {
    store: store,
    displayField: 'data', // what field should be displayed ^^" ?
    valueField: 'data', // same here I don't really know what to write
    fieldLabel: 'Departements',
    renderTo: Ext.getBody()
});

这里是 sencha fiddle 的链接 https://fiddle.sencha.com/#fiddle/iau，代码如下！非常感谢！！

Answer 1

在您的小提琴中，您使用了ArrayStore，它不是用于此目的 - 而是数据集中不存在模型的二维数组。请注意，我在以下示例中使用了常规商店。

无论您是否为数据显式创建模型，存储都会根据对象中的键（字段名称）查找值。 即如果您指定了name 和description 字段，那么它将查找结构如下的数据数组：

{
    name: 'Record Name',
    description: '...'
}

为了在前端解决这个问题，您可以将transform 应用于reader 配置，它允许您在原始数据对象被任何其他组件处理之前对其进行操作。例如：

var store = Ext.create('Ext.data.Store', {
    fields: ['name'],
    autoLoad: false,
    proxy: {
        type: 'ajax',
        url: 'data.json',
        reader: {
            type: 'json',
            rootProperty: 'GetDepartementsResult',
            transform: function(data){
                var key = this.getRootProperty();
                data[key] = data[key].map(function(val){
                    return { name: val };
                });
                return data;
            }
        }
    }
});

这样您就有了一个名为name 的明确字段，您可以使用它来配置组合框上的displayField 和valueField。

» fiddle