Ext

tomcat
  webapps
    ext
      WEB-INF -> web.xml
        classes
          mypackage
            person    -> Address.class, Person.class, Phone.class, Zipcode.class
            servlets  -> ExtJsArrayServlet.class, ExtJsJsonServlet.class, PersonCRUDServlet.class
            util      -> JsonObjectResponse.class, JsonResponseGeneratorUtil.class

tomcat
  webapps
    ext-2.1
      tutorials -> ExtArrayStart.html, ExtArrayStart.js, ExtJsonStart.html, ExtJsonStart.js, PersonCRUD.html, ExtStart.css
        mypackage
          person -> CreatePerson.js, DeletePerson.js, EditPerson.js, ListPersons.js, StartApp.js

// A Store object uses its configured implementation of DataReader to
// create Record instances from the data object. These Records are
// cached and made available through accessor functions.
var personDataStore = new Ext.data.Store({
    proxy: httpProxy,
    reader: personReader
});

// Fires after a new set of Records has been loaded successfully.
personDataStore.on('load', loadSuccessful);

{"people":
  {"data":
    [
      {"address":
        {"city":"Boulder","personId":5,"state":"CO","street":"7240 Angelica Rd","zip":
          {"zipcode":"80301"}
        },
      "birthdate":"1970/05/06","firstName":"Nick","id":5,"lastName":"Victorios","phoneNumbers":
        [
          {"name":"Cell","number":"773-528-1737","personId":5},
          {"name":"Home","number":"720-678-9876","personId":5}
        ]
      },
      {"address":
        {"city":"Chicago","personId":6,"state":"IL","street":"1940 Crystal Ave.","zip":
          {"zipcode":"60649"}},
      "birthdate":"1972/05/06","firstName":"Pete","id":6,"lastName":"Tutorios","phoneNumbers":
        [
          {"name":"Home","number":"312-558-2300","personId":6}
        ]
      }
    ],
    "message":"Successfully retrieved persons","success":true,"totalRows":2
  }
}

/**
 * Handle the occurrence of new set of Records have been loaded successfully.
 * @param {Store} store Store instance.
 * @param {Ext.data.Record[]} recordArray The Records that were loaded.
 * @param {Object} options The loading options that were specified (see load for details).
 */
function loadSuccessful(store, recordArray, options) {
           
    // After any data loads, the raw JSON data is available for further
    // custom processing. If no data is loaded or there is a load exception
    // this property will be undefined.
    Ext.MessageBox.alert('Confirm', personReader.jsonData.people.message);

}

// Create an http proxy to be used to call the server and retrieve data to
// be loaded using the reader and cached in the store.
var httpProxy = new Ext.data.HttpProxy({
    url: '/ext/personServlet?action=list'
});

// Fires if an error HTTP status was returned from the server. See
// HTTP Status Code Definitions for details of HTTP status codes.
// Handle any exception that may occur in the connection and http request.
httpProxy.getConnection().on('requestexception', requestFailed);

/**
 * Handle the occurrence of an error HTTP status that was returned from the server.
 * See HTTP Status Code Definitions for details of HTTP status codes.
 * @param {Ext.data.Connection} connection The Connection object.
 * @param {Object} response The XHR object containing the response data.
 *          See [http://www.w3.org/TR/XMLHttpRequest/] for details about accessing elements
 *          of the response.
 * @param {Object} options The options config object passed to the request method.
 */
function requestFailed(connection, response, options) {
    Ext.MessageBox.alert('Error Message',
        "Please contact support with the following: " +
        "Status: " + response.status +
        ", Status Text: " + response.statusText);
}

// Fires if an exception occurs in the Proxy during data loading.
// Called with the signature of the Proxy's "loadexception" event.
// Handle any exception that may occur in the Proxy during data loading.
personDataStore.on('loadexception', loadFailed);

{people: {success: false, message: "Error occurred trying to retrieve all the persons."}}

/**
 * Handle the occurrence of an exception that occurs in the Proxy during data
 * loading. This event can be fired for one of two reasons:
 * The load call returned success: false. This means the server logic returned
 * a failure status and there is no data to read. In this case, this event will
 * be raised and the fourth parameter (read error) will be null.
 * The load succeeded but the reader could not read the response. This means the
 * server returned data, but the configured Reader threw an error while reading
 * the data. In this case, this event will be raised and the caught error will be
 * passed along as the fourth parameter of this event.
 * @param {Object} proxy The HttpProxy object.
 * @param {Object) options The loading options that were specified (see load for details).
 * @param {Object} response The XMLHttpRequest object containing the response data.
 *        See [http://www.w3.org/TR/XMLHttpRequest/] for details about accessing elements
 *        of the response.
 * @param {Error} error The JavaScript Error object caught if the configured Reader
 *        could not read the data. If the load call returned success: false, this parameter
 *        will be null.
 */
function loadFailed(proxy, options, response, error) {

    // Decodes (parses) a JSON string to an object. If the JSON is invalid,
    // this function throws a SyntaxError.
    var object = Ext.util.JSON.decode(response.responseText);

    var errorMessage = "Error loading data.";

    // If the load from the server was successful and this method was called then
    // the reader could not read the response.
    if (object.people.success) {
        errorMessage = "The data returned from the server is in the wrong format. " +
            "Please notify support with the following information: " + response.responseText;
    } else {

        // Error on the server side will include an error message in the response.
        errorMessage = object.people.message;
    }

    Ext.MessageBox.alert('Error Message', errorMessage);
}

// Call the server and retrieve the data then load the form.
// Use the Ext.form.Action.Load class to load the form.
formPanel.form.load({
    url: '/ext/personServlet?action=loadPerson&id=' + selectedId,
    waitMsg: 'Loading',
    // The function to call when the response from the server was a failed
    // attempt (load in this case), or when an error occurred in the Ajax
    // communication.
    failure: loadFailed,
    // The function to call when the response from the server was a successful
    // attempt (load in this case).
    success: loadSuccessful
});

{"person":
  {"data":
    [
      {"address":
        {"city":"Chicago","personId":8,"state":"IL","street":"1940 Crystal Ave.","zip":
          {"zipcode":"60649"}
        },
      "birthdate":"1972/05/06","class":"mypackage.person.Person","firstName":"Pete","id":8,"lastName":"Tutorios","phoneNumbers":
        [
          {"name":"Home","number":"312-558-2300","personId":8}
        ]
      }
    ],
    "message":"Successfully found the person.","success":true,"totalRows":1
  }
}

/**
 * The function to call when the response from the server was a successful
 * attempt (load in this case). The function is passed the following parameters:
 *
 * @param {Ext.form.BasicForm} form The form that requested the action.
 * @param {Ext.form.Action} action The Action class.
 * The result property of this object may be examined to perform custom postprocessing.
 */
function loadSuccessful(form, action) {
     
    // Decodes (parses) a JSON string to an object. If the JSON is invalid,
    // this function throws a SyntaxError.
    var object = Ext.util.JSON.decode(action.response.responseText);
     
    Ext.MessageBox.alert('Confirm', object.person.message);

}

// Call the server and retrieve the data then load the form.
// Use the Ext.form.Action.Load class to load the form.
formPanel.form.load({
    url: '/ext/personServlet?action=loadPerson&id=' + selectedId,
    waitMsg: 'Loading',
    // The function to call when the response from the server was a failed
    // attempt (load in this case), or when an error occurred in the Ajax
    // communication.
    failure: loadFailed,
    // The function to call when the response from the server was a successful
    // attempt (load in this case).
    success: loadSuccessful
});

{"person":{"data":[],"message":"Exception occurred during the retrieval of the person.","success":false,"totalRows":0}}

/**
 * The function to call when the response from the server was a failed
 * attempt (load in this case), or when an error occurred in the Ajax
 * communication. The function is passed the following parameters:
 * @param {Ext.form.BasicForm} form The form that requested the action.
 * @param {Ext.form.Action} action The Action class.
 * If an Ajax error occurred, the failure type will be in failureType.
 * The result property of this object may be examined to perform custom postprocessing.
 *
 * A failed attempt (load in this case) response from the server will be:
 * {success: false, message: 'Failure message to be displayed.'}
 */
function loadFailed(form, action) {
     
    var failureMessage = "Error occurred trying to retrieve data.";
                 
    // Failure type returned when no field values are returned in the
    // response's data property or the successProperty value is false.
    if (action.failureType == Ext.form.Action.LOAD_FAILURE) {
                 
        // Error on the server side will include an error message in
        // the response.             
                 
        // Decodes (parses) a JSON string to an object. If the JSON is invalid,
        // this function throws a SyntaxError.
        var object = Ext.util.JSON.decode(action.response.responseText);
                                   
        failureMessage = object.person.message;
    }
    // Failure type returned when a communication error happens when
    // attempting to send a request to the remote server.
    else if (action.failureType == Ext.form.Action.CONNECT_FAILURE) {
                 
        // The XMLHttpRequest object containing the
        // response data. See http://www.w3.org/TR/XMLHttpRequest/ for
        // details about accessing elements of the response.
        failureMessage = "Please contact support with the following: " +
            "Status: " + action.response.status +
            ", Status Text: " + action.response.statusText;
    }
                       
    Ext.MessageBox.alert('Error Message', failureMessage);
}

// To enable normal browser submission of the Ext Form contained in this
// FormPanel, override the submit method.
// Use the Ext.form.Action.Submit class to submit the form.
formPanel.form.submit({                  
    waitMsg: 'In processing',    
    // The function to call when the response from the server was a failed
    // attempt (save in this case), or when an error occurred in the Ajax
    // communication.
    failure: submitFailed,             
    // The function to call when the response from the server was a successful
    // attempt (save in this case).
    success: submitSuccessful
});

{success: true, message: 'Person was saved successfully.'}

/**
 * The function to call when the response from the server was a successful
 * attempt (save in this case). The function is passed the following parameters:
 *
 * @param {Ext.form.BasicForm} form The form that requested the action.
 * @param {Ext.form.Action} action The Action class.
 * The result property of this object may be examined to perform custom postprocessing.
 *
 * A successful attempt (save in this case) response from the server will be:
 *
 * {success: true, message: 'Success message to be displayed.'}
 */
function submitSuccessful(form, action) {
    Ext.MessageBox.alert('Confirm', action.result.message);

    // Hide the popup window.
    window.hide();

    // Reload the data store with a call to the server and load
    // the grid again with the newly added person.
    personDataStore.load({params:{start:0, limit:10}});
}

// To enable normal browser submission of the Ext Form contained in this
// FormPanel, override the submit method.
// Use the Ext.form.Action.Submit class to submit the form.
formPanel.form.submit({
    waitMsg: 'In processing',
    // The function to call when the response from the server was a failed
    // attempt (save in this case), or when an error occurred in the Ajax
    // communication.
    failure: submitFailed,
    // The function to call when the response from the server was a successful
    // attempt (save in this case).
    success: submitSuccessful
});

{success: false, message: 'Person was not saved successfully. Please try again.'}

{success: false, errors:{"phone":"Phone must be in the format of xxx-xxx-xxxx"}, message: 'Please fix all highlighted errors.'}

/**
 * The function to call when the response from the server was a failed
 * attempt (save in this case), or when an error occurred in the Ajax
 * communication. The function is passed the following parameters:
 * @param {Ext.form.BasicForm} form The form that requested the action.
 * @param {Ext.form.Action} action The Action class.
 * If an Ajax error ocurred, the failure type will be in failureType.
 * The result property of this object may be examined to perform custom postprocessing.
 *
 * A failed attempt (save in this case) response from the server will be:
 *     {success: false, message: 'Failure message to be displayed.'}
 *
 * A failed attempt (validation in this case) response from the server will be:
 *     {
 *       success: false,
 *       errors: {
 *         "clientCode": "Client not found",
 *         "phone": "This field must be in the format of xxx-xxx-xxxx"
 *       },
 *       message : 'Validation Errors, please fix the errors noted.'
 *     }
 */
function submitFailed(form, action) {

    var failureMessage = "Error occurred trying to save data.";

    // Failure type returned when no field values are returned in the
    // response's data property or the successProperty value is false.
    if (action.failureType == Ext.form.Action.LOAD_FAILURE) {
    
        // Error on the server side will include an error message in
        // the response.
        failureMessage = action.result.message;
    }
    // Failure type returned when a communication error happens when
    // attempting to send a request to the remote server.
    else if (action.failureType == Ext.form.Action.CONNECT_FAILURE) {

        // The XMLHttpRequest object containing the
        // response data. See http://www.w3.org/TR/XMLHttpRequest/ for
        // details about accessing elements of the response.
        failureMessage = "Please contact support with the following: " +
            "Status: " + action.response.status +
            ", Status Text: " + action.response.statusText;
    }
    // Failure type returned when server side validation of the Form fails
    // indicating that field-specific error messages have been returned in
    // the response's errors property.
    else if (action.failureType == Ext.form.Action.SERVER_INVALID) {

        // Validation on the server side will include an error message in
        // the response.
        failureMessage = action.result.message;
    }
    // Failure type returned when client side validation of the Form fails
    // thus aborting a submit action.
    else if (action.failureType == Ext.form.Action.CLIENT_INVALID) {
        failureMessage = "Please fix any and all validation errors.";
    }
    // Since none of the failure types handled the error, simply retrieve
    // the message off of the response. The response from the server on a
    // failed submital (application error) is:
    // {success: false, message: 'Person was not saved successfully. Please try again.')
    else { 
        failureMessage = action.result.message;
    }

    Ext.MessageBox.alert('Error Message', failureMessage);
}

// Send a HTTP request to a remote server.
// Important: Ajax server requests are asynchronous, and this
// call will return before the response has been recieved.
// Process any returned data in a callback function.
new Ext.data.Connection().request({
    url: '/ext/personServlet?action=delete',
    params: {id: selectedPersons\[0\].get("id")},
    failure: requestFailed,
    success: requestSuccessful
});

{success: true, message: 'Person was deleted successfully.'}

/**
 * Handle a successful connection and http request to the server.
 * The response from the application may still be unsuccessful so
 * that needs to be checked.
 * @param {Object} response The XMLHttpRequest object containing the
 *          response data. See [http://www.w3.org/TR/XMLHttpRequest/] for
 *          details about accessing elements of the response.
 * @param {Object} options The parameter to the request call.
 */
function requestSuccessful(response, options) {

    // Decodes (parses) a JSON string to an object. If the JSON is invalid,
    // this function throws a SyntaxError.
    // The response text from the server is:
    // {success: true, message: 'Person was deleted successfully.'}
    // The object will contain two variables: success and message.
    var object = Ext.util.JSON.decode(response.responseText);

    // If the delete was successfully executed on server.
    if (object.success) {
        Ext.MessageBox.alert('Confirm', object.message);
    } else {
        Ext.MessageBox.alert('Error Message', object.message);
    }
}

/**
 * Handle an unsuccessful connection or http request to the server.
 * This has nothing to do with the response from the application.
 * @param {Object} response The XMLHttpRequest object containing the
 *          response data. See [http://www.w3.org/TR/XMLHttpRequest/] for
 *          details about accessing elements of the response.
 * @param {Object} options The parameter to the request call.
 */
function requestFailed(response, options) {

    // The request to the server was unsuccessful.
    Ext.MessageBox.alert('Error Message',
        "Please contact support with the following: " +
        "Status: " + response.status +
        ", Status Text: " + response.statusText);
}

{success: false, message: 'Person was not deleted due to an internal error. Please try again.'}