EXTJS 5在商店中加载一个非常简单的字符串数组 [英] EXTJS 5 Load a VERY SIMPLE string array in store

问题描述

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

  {
DepartementsResult：[
AME-CM，
BMAU，
BMKR，
BNVS
] 
} 
  

所以要获取这个数据，我想创建一个漂亮简单的商店，但第一个问题出现：应该是字段??? / p>

  var store = Ext.create（'Ext.data.Store'，{
 fields：['data'] ，//这里应该是什么字段，我没有^^
 pageSize：0，
 autoLoad：false，
 proxy：{
 type：'ajax'，
 url：'data.json'，//此文件包含上述数据
 reader：{
 type：'json'，
 rootProperty：'DepartementsResult'
 } 
} 
}）; 
  

然后当我要创建一个combo使用这个商店我不知道我应该写什么：

  var com bo = Ext.create（'Ext.form.field.ComboBox'，{
 store：store，
 displayField：'data'，//什么字段应该显示^^？ 
 valueField：'data'，//同样在这里我不知道该写什么
 fieldLabel：'Departements'，
 renderTo：Ext.getBody（）
}） ; 
  

这是链接 https://fiddle.sencha.com/#fiddle/iau 到sencha小提琴的代码描述如下！非常感谢！

解决方案

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

无论您是否显式创建数据模型，商店都将寻找价值对象中的一个键（字段名称）。 ie 如果您指定了名称和描述它将寻找一系列数据，结构如下：

  {
 name：'Record Name'，
 description：'...'
} 
  

为了在前端解决这个问题，您可以申请转换 到阅读器配置，允许您在原始数据对象处理任何其他组件之前进行操作。例如：

  var store = Ext.create（'Ext.data.Store'，{ 
字段：['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; 
 } 
} 
} 
}）; 
  

这样你就可以看到一个名为名称的清晰字段您可以在组合框中配置 displayField 和 valueField 。

»小提琴

I have a back end service that gives me an object which only contains an array of string. This is for example what the service gives me:

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

So to get this data I want to create a nice and simple store, but a first problem appear: what should be the field???

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

And then when I want to create a combo using this store I don't know what I should write also:

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

Here is the link https://fiddle.sencha.com/#fiddle/iau to the sencha fiddle with the code described bellow ! Thanks a lot !!

解决方案

In your fiddle you've used an ArrayStore which isn't intended for this purpose - rather a two-dimensional array in a data set whereby no model exists. Please note that I've used a regular store in the following example.

Regardless of whether you explicitly create a model for the data or not, a store will look for values against a key (field name) in an object. i.e. if you specified the fields name and description then it will look for an array of data structured as follows:

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

In order to work around this on the front-end you could apply a transform to the reader configuration which allows you to manipulate the raw data object before it is processed by any other components. For example:

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

This way you have a clear field called name which you can use to configure both the displayField and the valueField on your combo box.

» fiddle

这篇关于EXTJS 5在商店中加载一个非常简单的字符串数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！