Sencha ExtJS Ext.Ajax.request JSON POST and GET form panel examples

Here are two Sencha ExtJS Ext.Ajax.request JSON POST and GET examples. The first one shows how to add a Stock by getting all of the values in a Sencha form (Ext.form.Panel). Keys that I learned recently are:

• formPanel.getForm() gets the form (Ext.form.Basic)
• Ext.JSON.encode(formPanel.getValues()) JSON encodes all of the form values

Here’s the code:

// add a stock
onAddStockFormSaveClicked: function(button, event, options) {
    var win = button.up('window');
    var formPanel = win.down('form');
    var store = this.getStockList().getStore();
    // form is valid, send the data
    if (formPanel.getForm().isValid()) {
        Ext.Ajax.request({
            url: 'server/stocks/add',
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            params : Ext.JSON.encode(formPanel.getValues()),
            success: function(conn, response, options, eOpts) {
                var result = Packt.util.Util.decodeJSON(conn.responseText);
                if (result.success) {
                    Packt.util.Alert.msg('Success!', 'Stock was saved.');
                    store.load();
                    win.close();                      
                } else {
                    Packt.util.Util.showErrorMsg(result.msg);
                }
            },
            failure: function(conn, response, options, eOpts) {
                // TODO get the 'msg' from the json and display it
                Packt.util.Util.showErrorMsg(conn.responseText);
            }
        });
    }
},

This next example shows how to delete a Stock using a Sencha ExtJS Ext.Ajax.request with a simple GET method and a CGI-like url:

// delete one or more stocks
onDeleteStockButtonClicked: function (button, e, options) {
    var grid = this.getStockList();
    var record = grid.getSelectionModel().getSelection();
    var store = grid.getStore();
    if (store.getCount() >= 1 && record[0]) {
        var idToDelete = record[0].get('id');
        Ext.Msg.show({
             title:'Delete?',
             msg: 'Are you sure you want to delete ID(' + idToDelete + ')?',
             buttons: Ext.Msg.YESNO,
             icon: Ext.Msg.QUESTION,
             fn: function (buttonId){
                if (buttonId == 'yes'){
                    Ext.Ajax.request({
                        url: 'server/stocks/' + idToDelete + '/delete',
                        method: 'GET',
                        success: function(conn, response, options, eOpts) {
                            var result = Packt.util.Util.decodeJSON(conn.responseText);
                            if (result.success) {
                                Packt.util.Alert.msg('Success', 'The stock was deleted.');
                                store.load();
                            } else {
                                Packt.util.Util.showErrorMsg(conn.responseText);
                            }
                        },
                        failure: function(conn, response, options, eOpts) {
                            Packt.util.Util.showErrorMsg(conn.responseText);
                        }
                    });
                }
             }
        });
    } else {
        Ext.Msg.show({
            title:'Dude',
            msg: 'Dude, you need to select at least one stock.',
            buttons: Ext.Msg.OK,
            icon: Ext.Msg.WARNING
        });
    }
}

In that example I decode the JSON response using Packt.util.Util.decodeJSON, which I found in the book, Mastering ExtJS. This code also shows a Ext.Msg.show example.