Pinch Hitter Solutions

Extend Ext Grid Timeout

February 18th, 2010

In my last post, I showed how to extend the timeout for an Ext.Ajax.request({…}); request.

Extending the timeout for other Ext objects is not so simple. For grids needing information from the server, you will have to use a connection object and reference it in the datastore via an HttpProxy Object. Take a look at this connection object.

  var conn = new Ext.data.Connection({
            url: "/myurl.do",
            method: "POST",
            timeout:180000,
            baseParams:{
                cust: "555",
                state: "TN",
                start: 0
            }
        });

Note that we have extended the timeout to 180000 (3 minutes).

This encapsulates everything about the ajax request, including the timeout value. Now that we have this connection object, we can pass it to basically anything and it will be used in place of the defaults and in our case we our interested in extending the 30 second default timeout for an Ext grid. The connection object is useful elsewhere as well.

Here is an example datastore object that can use the connection object:

var myDataStore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy(conn),
    reader: new Ext.data.JsonReader({
        root: 'myDataArray',
        totalProperty: 'totalCount',
        fields: [
            {
                name: 'field1'
            },
            {
                name: 'field2'
            }
        ]
    })
});

So in this case, this datastore is is wrapped around a JsonReader for the purpose of loading a grid.

The grid would reference the datastore which references the connection.

Scott

Posted in Ext JS | Comments

Extend Ext JS Ajax Timeout

February 18th, 2010

The default timeout for Ext ajax requests is 30 seconds.   Sometimes that is plenty but other times it’s not nearly enough. 

To extend the timeout duration for  Ext.Ajax.request({…..}); you must add the following statement:

  Ext.Ajax.timeout = 90000; // this changes the 30 second default to 90 seconds

Since Ext.Ajax is a singleton, this only needs to be done once at the top of the js file that you want to extend the timeout for.

So once the above line executes, the Ext.Ajax.requests will allow for a 90 second timeout.  The value is in milliseconds so just add 3 zeros to whatever timeout you want the timeout duration to be:

90000 (90 seconds)

180000 (3 minutes)

Ext.onReady(function(){

                // Extend timeout for all Ext.Ajax.requests to 90 seconds.
                // Ext.Ajax is a singleton, this statement will extend the timeout
                // for all subsequent Ext.Ajax calls.
                Ext.Ajax.timeout = 90000;

                Ext.MessageBox.show({
                    title: "Executing Ajax Call",
                    msg: "Timeout has been extended",
                    buttons: Ext.MessageBox.OK,
                    icon: Ext.MessageBox.INFO
                });

                // Make ajax call.  Timeout is now set to 90 seconds.
                Ext.Ajax.request({
                    url: '/myurl.do',
                    params:{
                        action: "getInfo",
                        cust: "555"
                    },
                    success: function(response) {

                        var returnValue = response.responseText;

                        Ext.MessageBox.show({
                            title: "Customer Info",
                            msg: "Here is your customer info " + returnValue,
                            buttons: Ext.MessageBox.OK,
                            icon: Ext.MessageBox.INFO
                        });

                    },
                    failure: function(response) {
                        Ext.MessageBox.show({
                            title: "Ajax Call Failed",
                            msg: "Your timeout was extended but the call still failed.",
                            buttons: Ext.MessageBox.OK,
                            icon: Ext.MessageBox.ERROR
                        });

                    }
                });
            });

Ext.Ajax API

Scott

Posted in Ext JS | Comments