Results 1 to 10 of 37

Thread: ExtJS 2.1 and Java Demo - ExtJS Ajax Communication Best Practices

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha Premium Member
    Join Date
    May 2008
    Boulder, CO.
    Vote Rating

    Default ExtJS 2.1 and Java Demo - ExtJS Ajax Communication Best Practices

    I've been evaluating ExtJS 2.1 as the user interface for my client's next application. During my evaluation I've developed a demo (3 actually) that displays the powerful API of ExtJS. My background in JavaScript is very limited so I was surprised by how quickly I was able to develop (with a little help from the ExtJS forum's and tutorials) this demo.

    I've provided a lot of JavaScript doc and Java doc in the demo's to help me (and anyone reviewing the code) understand the code.

    I will be attaching a ExtJS Ajax Best Practices document in my next post. The code in that document will reference the more elaborate demo's code. The document explains my ultimate goal in researching ExtJS, communication (successful and unsuccessful (HTTP Errors, Application Errors and Validation Errors)) between the client and server. We all know they have fantastic looking and functioning widgets.

    The Demo uses Java HttpServlet's to accept requests and generate responses. The 3rd demo (more elaborate one) uses an HttpSession object as the data store.

    Attached you will find a zip file of 3 demo's/tutorials that I have written using ExtJS and Java.

    You will need the following to get the demo's working:
    • Java (I used Java 5)
    • A servlet container (I used Apache Tomcat 6)
    • FlexJson (Open Source Java to Json serializer)
    • ExtJS 2.1
    Follow the following steps to get the demo's working:
    1. Install Java
    2. Install the servlet container.
    3. Install ExtJS 2.1 onto the servlet container.
    4. Copy the FlexJson jar file to the servlet container's lib directory
    5. Compile the Java source for the demo's (don't forget to include the Servlet and FlexJson jar files when compiling).
    6. Copy the .html, .js, .css and .class files onto the servlet container.
    Before copying the .html, .js, .css and .class files onto the servlet container, you must create the directory structure to place these files into.

    Create a directory structure within the servlet container under its webapps directory called 'ext'. Within 'ext' create the 'WEB-INF' directory and place the web.xml file there. Within the 'WEB-INF' directory create a 'classes' directory:


    Within the 'classes' directory copy the compiled demo source code. It should look like this:

          WEB-INF -> web.xml
                person    -> Address.class, Person.class, Phone.class, Zipcode.class
                servlets  -> ExtJsArrayServlet.class, ExtJsJsonServlet.class, PersonCRUDServlet.class
                util      -> JsonObjectResponse.class, JsonResponseGeneratorUtil.class
    Downloading and installing ExtJS 2.1 should have created a directory structure that looks like this in your servlet container:


    Create a new directory called 'tutorials' under the ext-2.1 directory in your servlet container and copy the .html, .js, and .css files into it.

    The 'tutorials' directory should look like this:

          tutorials -> ExtArrayStart.html, ExtArrayStart.js, ExtJsonStart.html, ExtJsonStart.js, PersonCRUD.html, ExtStart.css
              person -> CreatePerson.js, DeletePerson.js, EditPerson.js, ListPersons.js, StartApp.js
    Start up your servlet container and point your browser to one of three urls:

    Demo 1

    http://localhost:8080/ext-2.1/tutori...rrayStart.html To view the grid
    http://localhost:8080/ext/strutsORsp...ReturningArray To view the array response from the server that populates the grid.

    Demo 2

    http://localhost:8080/ext-2.1/tutori...JsonStart.html To view the grid
    http://localhost:8080/ext/strutsORsp...CReturningJson To view the Json response from the server that populates the grid.

    Demo 3

    For demo 3 the Json is printed to the servlet container's console.

    Attached Files Attached Files
    Last edited by ExtJsAndJava; 14 Sep 2008 at 4:50 AM. Reason: Note to download the file using firefox

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts