ExtJS:使用远程加载的单例值来定义存储

试试这样写:

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();
                }
            }
        );
    }
});

我建议使用路由来完成此操作，因为您使用的是ExtJs 6。它完全是开箱即用的，但我想它对你的情况来说是最理想的。通过这种方式，你可以简单地确保，当一个路由被调用，你的应用程序的一部分被加载时，你总是可以做一些检查。例如，这对于检查用户凭据非常有用。更多关于路线的信息可以在这里找到。当你想通过路由处理用户会话时，这是一个很好的帖子。

单:

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

Base store:

Ext.define('Base', {
    extend: 'Ext.data.Store',
    alias: 'store.base',
    storeId: 'base',
    autoLoad: false,
    proxy: {
        type: 'rest',
        useDefaultXhrHeader: false,
        withCredentials: false
    },
    listeners: {
        beforeload: function(store, operation, eOpts) {
            store.getProxy().headers = {
                'X-Parse-Application-Id': Settings.appId,
                'X-Parse-REST-API-Key': Settings.apiKey,
                'Content-Type': 'application/json'
            }
        }
    }
});

The Things store:

Ext.define('MyApp.store.Things', {
    extend: 'MyApp.store.Base',        
    alias: 'store.things',
    model: 'MyApp.model.Thing',        
    storeId: 'things',
    requires: [
        'Settings'
    ],
    proxy: {
        api: {
            read: 'https://api.parse.com/1/classes/Thing',
            create: 'https://api.parse.com/1/classes/Thing'
        },
        reader: {
            type: 'json',
            rootProperty: 'results'
        }
    },
    autoLoad: false, // --> set to false
    autoSync: true
});

Ext.define('MyApp.view.main.MainController', {
    extend : 'Ext.app.ViewController',
    requires: [
        'Settings'
    ],
    stores: [
        'Things'
    ],
    routes : {
        'user/:id' : {
            before  : 'onBeforeUser',
            action  : 'onUser'
        }
    },
    onBeforeUser : function(id, action) {
        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);
                action.resume();
            }
        });
        // or even better
        Ext.Ajax.request({
            url: 'url/to/the/api',
            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
            },
            success: function(response, opts) {
                var obj = Ext.decode(response.responseText);
                Settings.appId = obj.appId;
                Settings.apiKey = obj.apiKey;
                Parse.initialize(Settings.appId, Settings.apiKey);
                action.resume();
            },
            failure: function(response, opts) {
                action.stop(true);
            }
        });
    },
    onUser : function(id) {
        Ext.getStore('things').load();
    }
});

我认为这个问题可以通过将代理定义移动到'Things'存储的构造函数中来解决，如下所示。

Ext.define('MyApp.store.Things', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.Thing', 
    autoLoad: true,
    autoSync: true,
    constructor: function(config) {
        config = Ext.apply({
            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,
                    'X-Parse-REST-API-Key':  Settings.appId,
                    'Content-Type': 'application/json'
                }
            }
        }, config);
        this.callParent([config]);
    }
}); 

当代理定义在构造函数内时，appId和设置。apiKey只有在创建'MyApp.store.Things'实例时才会被解析。