How To Make AJAX Calls With ExtJS Easily

Simple things should be simple. While starting with ExtJS, I saw a screencast on Grid which used a rather dubious method of making an AJAX call using an actual form element. I hunted for a better option and I came across a better option - Ext.data.Connection. Here’s an working example on how you can easily make AJAX call in ExtJS library.

var conn = new Ext.data.Connection();
conn.request({
    url: 'history.jsp',
    method: 'POST',
    params: {"metaID": metaID, columnName: field},
    success: function(responseObject) {
        showHistoryDialog(responseObject.responseText);
    },
     failure: function() {
         Ext.Msg.alert('Status', 'Unable to show history at this time. Please try again later.');
     }
});

Obviously you will have to implement the showHistoryDialog() method to your taste. Change the method names and url to suit your requirements.

The downside is that it doesn’t display a loading message which you can easily implement.

Update:
Here is the full code showing a Loading dialog too:

var conn = new Ext.data.Connection();

    // History buton click handler. It submits the request and displays the response using history dialog
    function showHistory() {
        if(record != null && field != null) {
            metaID = record.get("MetaID");
            grid.getGridEl().mask('Loading history...');
            conn.request({
                url: 'history.jsp',
                method: 'POST',
                params: {"metaID": metaID, columnName: field},
                success: function(responseObject) {
                    showHistoryDialog(responseObject.responseText);
                    grid.getGridEl().unmask(true);
                },
                failure: function() {
                    grid.getGridEl().unmask(true);
                    Ext.Msg.alert('Status', 'Unable to show history at this time. Please try again later.');
                }
            });
        }
    }

Note: The code is used in a production environment to display historical information. The server side code as well as the implementation of of showHistoryDialog() is not provided as it is irrelevant to the context.

With libraries like ExtJS and services like GMail, browser is now truly the king. You don’t need desktop applications for most purposes.