Ext JS - Combo 仅显示商店（SimpleStore）中项目的首字母？答案

【问题标题】：Ext JS - Combo only displays first letter of items in a store (SimpleStore)?Ext JS - Combo 仅显示商店（SimpleStore）中项目的首字母？
【发布时间】：2014-05-28 17:20:12
【问题描述】：

嗨，我有一个非常简单的 Ext JS 组合框，我只是想绑定到一个数组。这是组合的配置：

BPM.configs.ViewsCombo = {
    xtype: 'combo',
    emptyText: 'Select View',
    disableKeyFilter: true,
    triggerAction: 'all',
    displayField: 'name',
    mode: 'remote',
    render: function(combo) {
            this.store.load();
        }
    },
    store: new Ext.data.SimpleStore({
        proxy: new Ext.data.HttpProxy({
        url: '/Service.svc/GetUserViewNames',
            method: 'POST'
        }),
        root: 'GetUserViewNamesResult',
        fields: ['name']
    })
};

这是来自 Ajax 调用的响应/json：

{"GetUserViewNamesResult":["something","tree"]}

但是当我查看组合项目时，我看到的只是列表中的字母“s”和“t”。是什么赋予了？我返回的数组格式是否错误？

非常感谢。

【问题讨论】：

@29er.. 您可以将其发布为您自己问题的答案。它将帮助其他人弄清楚它的答案以及解决方案是什么。

标签： extjs

【解决方案1】：

我发现结果需要如下所示： {"GetUserViewNamesResult":[["something"],["tree"]]}.

这有点糟糕，因为现在我必须更改我的服务器端对象的序列化方式:(

【讨论】：

【解决方案2】：

使用它来将您的数组更改为所需的格式

for ( var i = 0, c = cars.length; i < c; i++ ) {
     cars[i] = [cars[i]];
}

参考这个how-to-bind-array-to-arrystore-in-order-to-populate-combo-in-extjs

【讨论】：

【解决方案3】：

是的，ExtJs 仍然没有能够处理字符串列表的阅读器。在服务器端（至少在 Java、C# 等中）这通常是您在编组 ENUM 类型时会得到的。

我必须编写自己的类，用于 ExtJs 4.1 MVC 样式：

/**
 * This extends basic reader and is used for converting lists of enums (e.g. ['a', 'b', 'c']) into lists of objects:
 * [ {name: 'a'}, {name:'b'}, {name:'c'}]. All models using this type of reader must have a single field called name. Or you can
 * pass a config option call 'fieldName' that will be used.
 *
 * This assumes that the server returns a standard response in the form:
 * { result: {...., "someEnum" : ['a', 'b', 'c']},
 *   total: 10,
 *   success: true,
 *   msg: 'some message'
 * }
 */
Ext.define('MY.store.EnumReader', {
    extend: 'Ext.data.reader.Json',
    alias: 'reader.enum',

    //we find the Enum value which should be a list of strings and use the 'name' property
    getData: function(data) {
        var me = this;
        //console.dir(data);
        var prop = Ext.isEmpty(this.fieldName) ? 'name' : this.fieldName;
        console.log('Using the model property: \''+ prop +'\' to set each enum item in the array');
        try {
            var enumArray = me.getRoot(data);
            //console.dir(enumArray);
            if (!Ext.isArray(enumArray)){
                console.error("expecting array of string (i.e. enum)");
                throw new Exception('not an array of strings - enum');
            }
            var enumToObjArray = Array.map(enumArray, function(item){
                    var obj = {};
                    obj[prop] = item;
                    return obj;
                }
            );
            //console.dir(enumToObjArray);
            var nodes = me.root.split('.');
            var target = data;
            var temp = "data";
            Array.forEach(nodes, function(item, index, allItems){
                temp += "['" + item + "']";
            });
            temp += " = enumToObjArray";
            //console.log('****************' + temp + '*****************');
            //evil 'eval' method. What other choice do we have?
            eval(temp);
            //console.dir(data);
            return data;
        }
        catch(ex){
            console.error('coudln\'t parse json response: ' + response.responseText);
            return this.callParent(response);
        }
    }
}, function() {
    console.log(this.getName() + ' defined');
});

然后，如果您想在商店中使用这种类型的阅读器，请添加：

requires: ['My.store.EnumReader'],
...

proxy: {
    type: 'ajax',
    url:  ...
    reader: {
            type: 'enum',

【讨论】：