ExtJs 5：具有内存存储的组合框不显示数据

Question

在我的项目中，我有一个 内存存储 ，其中包含 combobox 的本地数据。我通过 store.loadData() 插入数据，但也尝试了 store.loadRawData()。数据在商店中，但是当我将其分配给组合框时，无法选择项目。 组合框为空。

例如我有以下数据

var data = [
    {
        name: 'Tom',
        age: 20
    },
    {
        name: 'Peter',
        age: 30
    }
];

我使用内存代理和字段配置商店。

var store = Ext.create('Ext.data.Store', {
    fields: [
        'name',
        'age'
    ],
    proxy: {
        type: 'memory',
        reader: {
            type: 'json'
        }
    }
});

在我的应用程序中的某个地方，我使用

将数据加载到其中

store.loadRawData(data, false);

然后我将商店分配给组合框，但无法进行选择。

var combobox = Ext.create('Ext.form.field.ComboBox', {
    queryMode: 'local',
    typeAhead: true,
    forceSelection: true,
    valueField: 'name',
    store: store
});

但是当我遍历商店的数据并将其记录到控制台时，每个数据行都在那里。

store.each(function(record){
    console.log('name in store: %s', record.get('name'));
});

// In console:
// name in store: Tom
// name in store: Peter

我使用 ExtJs 5.0.1 并且可以在 Sencha Fiddle.

找到 fiddle

我在这里错过了什么？
感谢您的每一个建议和提示。

Answer 1

您可以为此使用内联数据：

Ext.onReady(function() {
    var data = [{
        name: 'Tom',
        age: 20
    }, {
        name: 'Peter',
        age: 30
    }];

    var store = Ext.create('Ext.data.Store', {
        fields: ['name', 'age'],
        data: data
    });

    // data is loaded successfully into store
    store.each(function(record) {
        console.log('name in store: %s', record.get('name'));
    });

    // combobox is empty...
    var combobox = Ext.create('Ext.form.field.ComboBox', {
        queryMode: 'local',
        typeAhead: true,
        forceSelection: true,
        valueField: 'name',
        renderTo: Ext.getBody(),
        store: store
    });
});

在您使用的代码中，您指定了 Json reader 但数据变量中的数据不是 JSON 字符串。如果你想使用 JSON 你应该这样做：

{
    "rows": [
        {
            "name": "Tom",
            "age": 20
        },
        {
            "name": "Peter",
            "age": 30
        }
    ]
}

Answer 2

您唯一的问题是缺少组合框的 displayField 属性。

Ext.onReady(function() {
    var data = [{
        name: 'Tom',
        age: 20
    }, {
        name: 'Peter',
        age: 30
    }];

    var store = Ext.create('Ext.data.Store', {
        fields: ['name', 'age'],
        proxy: {
            type: 'memory',
            reader: {
                type: 'json'
            }
        }
    });

    // loadRawData happens at an other place in the application
    // only here for the example
    store.loadRawData(data, false);

    // data is loaded successfully into store
    store.each(function(record) {
        console.log('name in store: %s', record.get('name'));
    });

    // combobox is empty...
    var combobox = Ext.create('Ext.form.field.ComboBox', {
        queryMode: 'local',
        typeAhead: true,
        forceSelection: true,
        displayField: 'name', // <-- Add this 
        valueField: 'name',
        renderTo: Ext.getBody(),
        store: store
    });
});

演示：https://fiddle.sencha.com/#fiddle/gbd

ExtJs 5：具有内存存储的组合框不显示数据

ExtJs 5: Combobox with memory store not display data

javascript

combobox

extjs

extjs5