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

这是链接 https://fiddle.sencha.com/#fiddle/iau用下面描述的代码来 Sencha !非常感谢!!

Answer 1

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

无论您是否显式地为数据创建模型，存储都会根据对象中的键(字段名称)查找值。 i.e. 如果您指定了字段 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