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

在您的小提琴中，您使用的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在商店中加载非常简单的字符串数组

1 个答案: