Question

我在尝试弄清楚如何做到这一点时遇到了一些麻烦（如果可能的话）。

我有一个使用parse.com来存储数据的应用程序，我希望每个用户拥有一个不同的parse.com帐户，这样他们的数据集就不会相交。所以我创建了一个单例（设置），用于存储用户的appId和apiKey，它们是由我管理的一般parse.com帐户加载的，包含每个用户的电子邮件，appId和apiKey，所以当他们登录应用程序时，它会获得用户的appId和apiKey。

问题是我需要在商店的定义中使用这些设置appId和apiKey，因为我需要在标题中发送它们。我已经做了一些测试，试图在应用程序启动时设置我的单例全局变量，但是在商店定义这两个＆＃34;全局变量＆＃34;由于应用尚未启动，因此为空。

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

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

Answer 2

我建议使用路由来完成此操作，因为您使用的是ExtJs 6.它完全开箱即用，但我觉得它非常适合您的情况。通过这种方式，您可以简单地确保在调用路径并加载应用程序的一部分时，您始终可以进行一些检查。例如，这对于检查用户凭据非常有用。当你想通过路线处理用户会话时，More information about routes can be found here.和this is a great post。

单身人士：

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

基地商店：

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商店：

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

Answer 3

我认为可以通过将代理定义移动到'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]);
    }
});

当代理定义在构造函数内部时，Settings.appId和Settings.apiKey仅在实例创建“MyApp.store.Things”时解析。

ExtJS：使用远程加载的单例值进行商店定义

3 个答案: