ExtJS: How to access Ajax request's value from any other proxy?

Question

I'm getting some specific data from a web-service and need to transfer this data to another web-service's extraParams. How can I achieve to it?

I've created a singleton class which handles information and after fetching those data; another store proxy will use those data.

This is singleton class;

Ext.define('MyApp.MyInfo', {
    requires: [] ,

    singleton: true,

    getMyId: function () {
        var me = this;

        var request = Ext.Ajax.request({
            url: myUrl() + '/info', //Here is web-service url

            success: function(response, opts) {
                var obj = Ext.decode(response.responseText);
                var myId = obj.data[0].id; // Successfully gets required ID

                console.log(myId); // Successfully prints ID value
                // callback(userGid); //Not sure if callback method will handle ID value to fetch on any other class..            
            },

            failure: function(response, opts) {
                console.log('server-side failure with status code ' + response.status);
            }
        });
    }
});

and here is other proxy which needs myId value from Ajax.request above;

stores: {
        myFooStore: {
            model: 'MyApp.Model',
            autoLoad: true,
            session: true,
            proxy: {
                url: myUrl() + '/the/other/service', 
                type: 'ajax',
                extraParams: {                   
                    id: // HERE! I need to get myId value on here. And couldn't get it.
                },
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            }
        },

Answer 1

Instead of store auto load you need to call store.load() method to load your particular store. And you can pass your params using store.getProxy() like below example:

//you can set using get proxy
store.getProxy().setExtraParams({
    id: id
});
store.load()

//or you can direcly pass inside of store.load method like this
store.load({
    params: {
        id: 'value' //whatever your extraparms you can pass like this
    }
});

In this Fiddle, I have created a demo based on your requirement.

Code snippet:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('MyInfo', {

            alternateClassName: "myinfo",

            singleton: true,

            getMyId: function (callback) {
                var me = this;

                Ext.Ajax.request({

                    url: 'id.json', //Here is web-service url

                    success: function (response, opts) {
                        var obj = Ext.decode(response.responseText),
                            myId = obj.data[0].id; // Successfully gets required ID

                        console.log(myId); // Successfully prints ID value

                        callback(myId);
                    },
                    failure: function (response, opts) {
                        callback('');
                        console.log('server-side failure with status code ' + response.status);
                    }
                });
            }
        });

        Ext.define('MyViewController', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.myview',

            onLoadButtonTap: function () {
                var view = this.getView(),
                    myFooStore = this.getViewModel().getStore('myFooStore');
                view.mask('Please wait..');
                myinfo.getMyId(function (id) {
                    view.unmask();
                    if (id) {
                        myFooStore.getProxy().setExtraParams({
                            id: id
                        });
                        myFooStore.load();
                        /*
                        You can also do like this

                        myFooStore.load({
                            url:'',//If you want to change url dynamically
                            params:{
                                id:'value'//whatever your extraparms you can pass like this
                            }
                        });

                        */
                    }
                });

            }
        });

        Ext.define("ViewportViewModel", {
            extend: "Ext.app.ViewModel",

            alias: 'viewmodel.myvm',

            stores: {
                myFooStore: {

                    fields: ['name', 'email', 'phone'],

                    proxy: {
                        type: 'ajax',

                        url: 'data1.json',

                        reader: {
                            type: 'json',
                            rootProperty: ''
                        }
                    }
                }
            }
        });

        //creating panel with GRID and FORM
        Ext.create({

            xtype: 'panel',

            controller: 'myview',

            title: 'Demo with singletone class',

            renderTo: Ext.getBody(),

            viewModel: {
                type: 'myvm'
            },

            layout: 'vbox',

            items: [{
                xtype: 'grid',

                flex: 1,

                width: '100%',

                bind: '{myFooStore}',

                columns: [{
                    text: 'Name',
                    dataIndex: 'name'
                }, {
                    text: 'Email',
                    dataIndex: 'email',
                    flex: 1
                }, {
                    text: 'Phone',
                    dataIndex: 'phone'
                }]
            }],

            tbar: [{
                text: 'Load Data',
                handler: 'onLoadButtonTap'
            }]
        });
    }
});