javascript - EXTJS 扩展 Ext.data.JsonStore

Question

我是 ExtJS(我正在使用版本 5.1)新手，我正在尝试将单个文件应用程序拆分为不同的文件。我已经将一家商店移到了外面的一个单独的文件中。这是单独文件中的存储:

Ext.define("MT.store.MicroProfilerStore", {

    extend: "Ext.data.JsonStore",

    singleton : true,
    model  : 'MT.model.MicroProfilerModel',
    storeId: "micro_profiler_store",
    autoLoad: false,
    proxy: {
        type: 'ajax',
        url: './backend/profiler.php',
        reader: {
            type: 'json',
            rootProperty: 'answers'
        }
    }
});

如果我使用此文件，ajax 请求是正确的，我可以看到回复，但看起来商店忽略了 rootProperty，而不是在 store.getData() 中包含答案数组，我有一个项目数组第一个值是将整个响应转换为 JavaScript，例如:

[{success: 'true', answers: [{}, {}]}]

但是，如果我直接创建商店而不使用 Ext.create("Ext.data.JsonStore", {...}) 进行子类化，那么它就可以工作!

经过一天的尝试，我发现了一个可以让我为商店保留单独文件的技巧:

Ext.define("MT.store.MicroProfilerStore", function(){
    Ext.require(['MT.model.MicroProfilerModel'], function(){
        Ext.create("Ext.data.JsonStore", {
            singleton : true,
            model  : 'MT.model.MicroProfilerModel',
            storeId: "micro_profiler_store",
            autoLoad: false,
            proxy: {
                type: 'ajax',
                url: './backend/profiler.php',
                reader: {
                    type: 'json',
                    rootProperty: 'answers'
                }
            }
        });
    });

    return {};
});

然后我可以使用 StoreManger.lookup() 获取商店。好吧，它工作正常，但问题是为什么？

PS我已经尝试在商店之前预加载模型，明确要求模型和商店在很多地方它看起来不像优先级错误

感谢您的帮助

Answer 1

我们有很多商店可以设置为单例，但似乎 singleton:true 并不是 ExtJS 最佳实践的一部分。

如果我们需要一个“单一存储”(大约 90% 的情况)，我们仍然会创建一个普通存储，但将该存储添加到 Application.js 中的存储数组中，以便在应用程序启动之前创建实例。使商店成为单例的是 storeId，通过它可以从任何地方引用它。我们所有的单例存储都是使用特殊的构造函数/callParent 构造来定义的，因为否则我们无法让 reader rootProperty 工作:

Ext.define('MyApp.store.Directories',{
    extend: 'Ext.data.Store',
    storeId: 'DirectoryStore',

    constructor: function() {
        var me = this;
        this.callParent([{
            proxy: {
                type: 'ajax',
                headers:{'Accept':'application/json'},
                noCache: true,
                pageParam: false,
                startParam: false,
                limitParam: false,
                extraParams: {
                    q: 'directory'
                },
                url: '../api/AddressBook',
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            },
            autoLoad: true
        }]);
    }   
});

特殊的构造函数/callParent 部分在这里产生了差异。我们并不确切知道它为什么有效，但它确实有效 - 我们从 Sencha Architect 生成的代码中复制了该方法。如果我们现在需要该商店的内容在任何地方，我们将执行以下操作:

xtype:'combo',
name:'Directory',
store:'DirectoryStore' // <- reference by storeId!

如果我们不将商店添加到 Application.js 中的商店数组中，storeId 引用就会失败，我们应该在其中保留所有“单一”商店的列表:

Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',
    name: 'MyApp',

    views: [
        /* Allgemein */
        ...
    ],
    controllers: [
        'Configuration',
        ...
    ],
    stores: [
        'Directories',
        ...
    ]