Uncaught TypeError: Cannot call method 'request' of undefined

Question

In my javascript code, I keep getting the following error:

Uncaught TypeError: Cannot call method 'request' of undefined

My Javascript is below. Any assistance would be greatly appreciated!

myJsonStore = {
    store1: new Ext.data.JsonStore({
        root: 'rootstore1',
        fields: ['UserID', 'UserName']
    })
};  

//------My panel------
items: [{                           
    xtype: 'combo',                          
    id: 'UName',                            
    fieldLabel: 'User',
    emptyText: 'All',                            
    store: myJsonStore.store1,                          
    displayField: 'UserName',                            
    valueField: 'UserID'                               
}] 

//--------------------

Ext.Ajax.request({                             
    url: "rPages/rLogMatchOdds.aspx",                            
    params: {                               
        m: 'init'                            
    },                                
    success: function(response) {     
        var data = Ext.decode(response.responseText);
        myJsonStore.store1.loadData(data);
    }
});

Ext.getCmp('UName').store.on('load', function(my, rec) {
    Ext.getCmp('UName').setValue(rec[0].get('UserName'));                         
}, this);

Answer 1

Usually, when the error is of the form Cannot call method 'X' of undefined, it means that whatever object you are attempting to call X from does not exist.

In your case, it appears as though Ext.Ajax is undefined. The easiest way to resolve this involves two simple steps:

• Make sure that you've included the javascript file that creates Ext.Ajax. If you're using the ext-all.js file, then you shouldn't have to worry about this.

• Make sure that none of your code executes until the browser is ready. The best way to do this is to wrap all of your code within a Ext.onReady() call. I've provided an example below.

  Ext.onReady( function() { //your code goes here });
  

You can see more examples of this at the ExtJS Examples page.

Answer 2

Got bitten by this problem too.

The solution is for you to call Ext.require('Ext.Ajax') before Ext.onReady like so:

Ext.require('Ext.Ajax');

Ext.onReady(function() {
   Ext.Ajax.request({
     // your code here...
});