Question

I have trouble using scope in nested functions. My code is below and also errors is stated in the code. How can I pass scope to nested functions?

this.store_1.load({
    params  :{start:0, limit:20},
    callback: function(records, operation, success)
    {
        this.store_2.load({
            params      : {argID: argID},
            callback    : function(records, operation, success) {

                var my_data = this.store_2.data.items[0].data;  

                this.my_rowExpander = new Ext.ux.grid.RowExpander({
                    tpl : new Ext.Template(template_str)
                });

                this.MyDetailGraph = this.getMyGraph(graphDataArr);

                this.MyDetailSummaryPanel = new Ext.Panel({ 
                        html    : this.getMyDetailSummary_Template(arg1, arg2, arg3),
                        title   : 'Title'
                });

                this.myPagingBBar = new Ext.PagingToolbar({
                      pageSize      : 20,
                      buttonAlign   : 'center',
                      store         : this.store_1,
                      doRefresh     : function(){
                            this.store.load({ // if I use this.store_1.load gives error this.store_1 is undefined
                                params  :{start:0, limit:20},
                                callback: function(records, operation, success)
                                {   
                                    // here gives error -->  this.updateDetailGraphValue is not a function
                                    this.updateDetailGraphValue(arg1, this.MyDetailGraph, arg2);
                                    // here must be an error like above
                                    this.updateDetailSummaryPanelValue(this.MyDetailSummaryPanel, arg1, arg2, arg3);
                                }
                            });
                      }
                });

                this.MyDetailGrid = new Ext.grid.GridPanel({
                    store       : this.store_1,
                    bbar        : this.myPagingBBar,
                    plugins     : this.my_rowExpander,
                    columns     :[
                                    this.my_rowExpander,
                                    {header: 'header1'},
                                    {header: 'header2'},
                                    {header: 'header3'},
                                    {header: 'header4'}
                                 ]
                });

                argPanel.items.insert(0, this.MyDetailGraph);

                argPanel.items.insert(1, this.MyDetailSummaryPanel);

                argPanel.items.insert(2, this.MyDetailGrid);

                argPanel.doLayout();
            },
            scope       : this
        });
    }, 
    scope : this
});

this.updateDetailGraphValue = function(argMainPanel, argGraph, argDataArray)
{
        this.graph = this.getDetailGraph(argDataArray);
        argMainPanel.remove(argGraph, true);
        argMainPanel.items.insert(0, this.graph);
        argMainPanel.doLayout();
};

this.updateDetailSummaryPanelValue = function(argPanel, arg1, arg2, arg3)
{
        argPanel.update(this.getDetailSummary_Template(arg1, arg2, arg3));
        argPanel.doLayout();
};

Answer 1

I used this in first load and I have defined a global scope which is myGlobalScope then I used myGlobalScope in others:

this.store_1.load({
    params  :{start:0, limit:20},
    scope: this,
    callback: function(records, operation, success)
    {

    var myGlobalScope = this; // I have defined this global scope


        this.store_2.load({
            params      : {argID: argID},
            scope   : myGlobalScope, // use myGlobalScope instead of this
            callback    : function(records, operation, success) {

                var my_data = this.store_2.data.items[0].data;  

                this.my_rowExpander = new Ext.ux.grid.RowExpander({
                    tpl : new Ext.Template(template_str)
                });

                this.MyDetailGraph = this.getMyGraph(graphDataArr);

                this.MyDetailSummaryPanel = new Ext.Panel({ 
                        html    : myGlobalScope.getMyDetailSummary_Template(arg1, arg2, arg3), // use myGlobalScope instead of this
                        title   : 'Title'
                });

                this.myPagingBBar = new Ext.PagingToolbar({
                      pageSize      : 20,
                      buttonAlign   : 'center',
                      store         : this.store_1,
                      doRefresh     : function(){
                            this.store.load({ // if I use this.store_1.load gives error this.store_1 is undefined
                                params  :{start:0, limit:20},
                                scope   : this,
                                callback:  function innerCB(records, operation, success) {   
                    myGlobalScope.updateDetailGraphValue(arg1, this.MyDetailGraph, arg2); // use myGlobalScope instead of this
                        myGlobalScope.updateDetailSummaryPanelValue(this.MyDetailSummaryPanel, arg1, arg2, arg3); // use myGlobalScope instead of this
                }
                            });
                      }
                });

                this.MyDetailGrid = new Ext.grid.GridPanel({
                    store       : this.store_1,
                    bbar        : this.myPagingBBar,
                    plugins     : this.my_rowExpander,
                    columns     :[
                                    this.my_rowExpander,
                                    {header: 'header1'},
                                    {header: 'header2'},
                                    {header: 'header3'},
                                    {header: 'header4'}
                                 ]
                });

                argPanel.items.insert(0, this.MyDetailGraph);

                argPanel.items.insert(1, this.MyDetailSummaryPanel);

                argPanel.items.insert(2, this.MyDetailGrid);

                argPanel.doLayout();
            }
        });
    }
});

this.updateDetailGraphValue = function(argMainPanel, argGraph, argDataArray)
{
        this.graph = this.getDetailGraph(argDataArray);
        argMainPanel.remove(argGraph, true);
        argMainPanel.items.insert(0, this.graph);
        argMainPanel.doLayout();
};

this.updateDetailSummaryPanelValue = function(argPanel, arg1, arg2, arg3)
{
        argPanel.update(this.getDetailSummary_Template(arg1, arg2, arg3));
        argPanel.doLayout();
};