javascript - ExtJS:使用远程加载的单例值进行存储定义

Question

我在尝试弄清楚如何执行此操作时遇到了一些麻烦(如果可能的话)。

我有一个应用程序使用 parse.com 来存储它的数据，问题是我希望每个用户都有一个不同的 parse.com 帐户，这样他们的数据集就不会交叉。所以我创建了一个单例(设置)来存储用户的 appId 和 apiKey，它们是从我管理的通用 parse.com 帐户加载的，包含每个用户的电子邮件、appId 和 apiKey，所以当他们登录到应用程序时，它会得到用户的 appId 和 apiKey。

问题是我需要在我的商店定义中使用这些设置、appId 和 apiKey，因为我需要在 header 中发送它们。我做了一些测试，试图在应用程序启动时设置我的单例的全局变量，但在商店定义时，这两个“全局变量”都为空，因为应用程序尚未启动。

这是我的一些代码，所以我可以让自己更清楚一点，因为我知道这不是最容易理解的东西。

应用程序.js

Ext.define('Settings', {
    singleton: true,        
    appId: null,
    apiKey: null
});


Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',        
    name: 'MyApp',        
    stores: [],
    launch: function () {
        Ext.create('MyApp.store.Settings').load({
            params: {
                'where': '{"email": "useremail@gmail.com"}' //email is supposed to be a user input but for the sakes of testing I just made it static
            },
            callback: function(records){
                var s = records[0];
                Settings.appId = s.get('appId');
                Settings.apiKey = s.get('apiKey');
                Parse.initialize(Settings.appId, Settings.apiKey);
            }
        });
    },


    onAppUpdate: function () {
        Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
            function (choice) {
                if (choice === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

商店

Ext.define('MyApp.store.Things', {
    extend: 'Ext.data.Store',        
    model: 'MyApp.model.Thing',        
    proxy: {
        type: 'rest',
        api: {
            read: 'https://api.parse.com/1/classes/Thing',
            create: 'https://api.parse.com/1/classes/Thing'
        },
        reader: {
            type: 'json',
            rootProperty: 'results'
        },
        useDefaultXhrHeader: false,
        withCredentials: false,
        headers: {
            'X-Parse-Application-Id': Settings.appId, //this is null at the time of definition, but I want it to be the newly fetched value at the time of app launch
            'X-Parse-REST-API-Key': Settings.apiKey, //this is obviously null as well
            'Content-Type': 'application/json'
        }
    },
    autoLoad: true,
    autoSync: true
});

解决这个问题的方法是什么？

顺便说一下..如果有人能为这个话题想出一个合适的名字，请随意更改或建议。

Answer 1

试试这样的:

Ext.define('Settings', {
    singleton: true,
    appId: null,
    apiKey: null
});

Ext.define('MyApp.store.Things', {
    extend: 'Ext.data.Store',

    model: 'MyApp.model.Thing',

    proxy: {
        type: 'rest',
        api: {
            read: 'https://api.parse.com/1/classes/Thing',
            create: 'https://api.parse.com/1/classes/Thing'
        },
        reader: {
            type: 'json',
            rootProperty: 'results'
        },
        useDefaultXhrHeader: false,
        withCredentials: false,
    },
    //autoLoad: true,
    autoSync: true
});

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

    name: 'MyApp',


    stores: ['Things'],
    launch: function() {
        var settings = Ext.create('MyApp.store.Settings');
        settings.on('load', function() {
            var things = Ext.getStore('Things');
            things.getProxy().setHeaders({
                'X-Parse-Application-Id': Settings.appId, 
                'X-Parse-REST-API-Key': Settings.apiKey, 
                'Content-Type': 'application/json'
            });
            things.load();
        });

        settings.load({
            params: {
                'where': '{"email": "useremail@gmail.com"}' //email is supposed to be a user input but for the sakes of testing I just made it static
            },
            callback: function(records) {
                var s = records[0];
                Settings.appId = s.get('appId');
                Settings.apiKey = s.get('apiKey');
                Parse.initialize(Settings.appId, Settings.apiKey);
            }
        });
    },


    onAppUpdate: function() {
        Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
            function(choice) {
                if (choice === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});