By Alvin Alexander. Last updated: June 6, 2016
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.