Question

this.getSecondPanel = function(argPanel, argID)
{
    Ext.Ajax.request({
        url     : 'myActionURL',
        params  : {id: argID}, 
        success : function(response)
        {
            var resData = Ext.util.JSON.decode(response.responseText);
            var totalCount = resData.totalCount;

            argPanel.items.insert(0, this.getTotalCountPanel(totalCount));
        },
        failure : function(response)
        {
            Ext.Msg.alert('Error: ', response);
        }
    }); 
};

this.getTotalCountPanel = function(argCounter) 
{
    return new Ext.Panel({
        title   : 'Summary Panel',
        html    : '<table class="bgrGREYlight" width="100%" style="padding:5">' +
                    '<tbody>' +
                        '<tr>' +
                            '<th align="left" width="20%" class="tableTEXT2">' + Total Count + '</th>' +
                            '<td  width="80%" align="left" class="tableTEXT">' + argCounter + '</td>' +
                        '</tr>' +
                    '</tbody>' +
                  '</table>'
    });
};

when I run above code, it gives

TypeError: this.getTotalCountPanel is not a function

error. I guess it is a scope problem. How can I fix this error?

Answer 1

Yes you can set scope: this in the request method options object.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Ajax-method-request

this.getSecondPanel = function(argPanel, argID)
{
    Ext.Ajax.request({
        scope:this,  //<-----  scope set to current context
        url     : 'myActionURL',
        params  : {id: argID}, 
        success : function(response)
        {
            var resData = Ext.util.JSON.decode(response.responseText);
            var totalCount = resData.totalCount;

            argPanel.items.insert(0, this.getTotalCountPanel(totalCount));
        },
        failure : function(response)
        {
            Ext.Msg.alert('Error: ', response);
        }
    }); 
};