ExtJS — 如何在 ajax 调用后手动加载存储数据？

Question

我将工作中的 Fiddle 从 ajax 代理类型重写为 memory。我正在尝试手动加载memory 存储数据：

// app/model/Employees.js file
Ext.define('Fiddle.model.Employees', {
    extend: 'Ext.data.Model',
    entityName: 'Employees',

    fields: [
        {
            name: 'profile_pic'
        },
        {
            type: 'int',
            name: 'age'
        },
        {
            type: 'string',
            name: 'last',
            mapping: 'name.last'
        },
        {
            type: 'string',
            name: 'first',
            mapping: 'name.first'

        },
        {
            type: 'string',
            name: 'email'
        }
    ],

    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'items',
            totalProperty: 'total',
            successProperty: ''
        }
    }
});

// app/store/Employees.js file
Ext.define('Fiddle.store.Employees', {
    extend: 'Ext.data.Store',
    pageSize: 30, // items per page
    alias: 'store.employees',
    model: 'Fiddle.model.Employees',
});

//app.js fule - launch() function
var store = Ext.create('Fiddle.store.Employees');
console.log(store);


Ext.Ajax.request({
    url: 'mates.json',
    success: function(resp) {
        var result = resp.responseText;
        console.log(result);
        // store.loadRawData(result);
        store.loadData(result);
        console.log(store);
        console.log(store.getAt(0));
    },
});

因此，我的 json 文件中的每个符号都存储了 3386 条记录。我在控制台中看到的第一条记录：

我做错了什么？

我需要在哪里放置proxy 行 - 在模型中还是在商店中？

Answer 1

responseText 是一个字符串，包含序列化的 JSON 数据。您必须先将其反序列化为对象，然后才能使用loadRawData 通过模型转换器将对象加载到存储中：

var result = Ext.decode(resp.responseText);
store.loadRawData(result);

loadData 和loadRawData 的不同之处在于loadData 不调用模型上的转换器。 loadRawData 相当于 ajax 代理所做的，loadData 不是。

Answer 2

是这样做的：

//in Grid panel js file
listeners: {
    afterrender: function(grid, evt) {

        var myStore = grid.getStore();

        Ext.Ajax.request({
            url: 'mates.json',
            success: function(resp) {
                var result = Ext.decode(resp.responseText);
                myStore.getProxy().data = result;
                myStore.load();
            },
        });

    }
}

必须禁用店内autoLoad: true。这种加载方式而不是store.loadRawData(result); 显示了pagingtoolbar 中正确的记录数。