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

在您的小提琴中,您使用的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组合框.

»小提琴