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

这是 link https://fiddle.sencha.com/#fiddle/iau 到 sencha fiddle 的代码，如下所述！非常感谢！！

Answer 1

在您的 fiddle 中，您使用的 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

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

EXTJS 5 Load a VERY SIMPLE string array in store

javascript

arrays

extjs

store

extjs5