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 最佳实践的一部分。

如果我们需要一个 "singleton store"，这大约是 90% 的时间，我们仍然会创建一个普通存储，但是将该存储添加到 Application.js 中的存储数组中，以便实例在应用程序启动之前创建。使商店成为单身人士的是 storeId，通过它可以从任何地方引用它。我们所有的单例存储都是使用特殊的 constructor/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
        }]);
    }   
});

特殊的 constructor/callParent 部分在这里有所不同。我们不完全知道它为什么有效，但它有效 - 我们从 Sencha Architect 生成的代码中复制了该方法。如果我们现在在任何地方都需要该商店的内容，我们将执行以下操作：

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

如果我们不将商店添加到 Application.js 中的商店数组，storeId 引用将失败，我们应该在其中保留所有 "singleton" 商店的列表：

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

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

EXTJS 扩展 Ext.data.JsonStore

EXTJS Extending Ext.data.JsonStore

javascript

extjs

extjs5