在 extjs 组合框中使用单值 json

Question

这是我得到的 json 响应。我检查了 JSONLINT，它说有效，但如果你注意到它只给了我没有列标题的价值......列名是“States”。

 {"myTable":["VA","CA","CO","OK","PA","TX"]}

是否可以使用此 Json 加载到我的组合框中

items: [{
                    xtype: 'combo',
                    id: 'iccombo',
                    scope: this,
                    store: this.store,
                    mode: 'remote',
                    minChars: 0,
                    fieldLabel: 'Short State',
                    displayField: 'States',
                    valueField: 'States',
                    typeAhead: true,
                    name: 'States',
                    labelWidth: 125,
                    anchor: '95%'
                },

这是我的店

var store = Ext.create('Ext.data.Store', {
        autoLoad: true,
        id: 'OurData',
        scope: this,
        fields: [{ name: 'States' }],
        proxy: {
            type: 'ajax',
            url: 'GetState/getS',
            reader: {
                type: 'json',
                root: 'myTable'
                idProperty: 'States'
            }
        }
    });

Answer 1

Ext 具有开箱即用的 Array Reader，这几乎是匹配的，但需要对您拥有的数据格式进行调整。阵列阅读器可以定制，以获取您的数据格式并将其转换为所需的格式。这种定制对于许多无法在服务器级别修改的服务很常见，因此借助 Ext JS 数据框架，我们可以轻松地在 UI 级别进行调整。

这是您可以使用的自定义阅读器以及基于您的示例的实现以及按记录显示数据的快速循环：

/**
 * A customized reader to convert a list to an array for the
 * ArrayReader to take
 */
Ext.define('Ext.ux.data.reader.JsonList', {

    extend: 'Ext.data.reader.Array',

    alias : 'reader.jsonlist',

    root: 'myTable',

    /**
     * this is really the guts of the change
     * convert an array of strings to an array of arrays of strings 
     */
    extractData: function (root) {
        var data;

        if (Ext.isArray(root) && !Ext.isArray(root[0])) {
            root.forEach(function (val, idx, all) {
                /* turn the value into an array */
                all[idx] = [val];
            })
        }

        data = root;

        /* hand the array of arrays up to the ArrayReader */
        return this.callParent([data]);
    }
});

store = Ext.create('Ext.data.Store', {
    autoLoad: true,
    id: 'OurData',
    scope: this,
    fields: [{ name: 'State' }],
    proxy: {
        /* change this back to ajax to get server data */
        type: 'memory',
        url: 'GetState/getS',
        reader: {
            type: 'jsonlist'
        }
    }, 

    /* temp data for simplified demo code */
    data: {"myTable":["VA","CA","CO","OK","PA","TX"]}
});

/* just to demo that there are six records with State as the field name: */
store.each(function (rec, id, total) {
    console.log(rec.get('State'))
});