Question

在我的项目中，我有一个记忆库，其中包含组合框的本地数据。我通过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找到小提琴。

我在这里想念的是什么？感谢您的每一个建议和提示。

Answer 1

您只发出缺少组合框的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

Answer 2

您可以使用内联数据：

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阅读器，但数据变量中的数据不是JSON字符串。如果你想使用JSON，你应该这样做：

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

ExtJs 5：Combobox与内存存储不显示数据

2 个答案: