Saturday, August 9, 2008

Getting started with Grails and Extjs

This article describes how to get started using extjs with your grails app. Since the plugin is deprecated because of the GPL license fiasco, I decided to write my own simple grails script to handle installing extjs for the team for 2 main reasons:
1) Prevents me from having to commit 500+ files into SVN for every new version
2) Makes it easier to upgrade to newer versions of extjs in the future

We have 2 existing internal applications that use extjs and every upgrade I am kicking myself for not using maven to extract the extjs zip file. So with our new grails app I wanted to not make the same mistake.

Install Extjs
1) Download your choice of extjs. Note as of version 2.1 extjs is under the GPL license. Meaning if your project isn't open sourced under the GPL or an internal company app then you need to use the 2.0.x versions (2.0.2 is the latest). In our case I downloaded version 2.2.

2) Copy ext-2.2.zip into your grails plugins directory

3) cd into your grails application

4) Add the zip file to svn (or whatever): svn add plugins/ext-2.2.zip

5) run grails create-script install-extjs

6) Add the script to svn: svn add scripts/InstallExtjs.groovy

7) Modify the InstallExtjs.groovy script and add the following GANT code.

8) run grails install-extjs

9) Exclude the unziped ext directory: svn propedit svn:ignores web-app/js Exclude the folder ext.

Test it out
Now that you have extjs installed you can copy one of their examples into the grails web-app directory and update the links.

1) Open up the ext-2.2.zip file again and extract the array-grid.html and array-grid.js files from the examples/grid folder to the grails web-app directory.

2) Modify the array-grid.html file. Update the relative links for css and javascript by replacing ../../ with js/ext/. For example, href="../../resources/css/ext-all.css", should now be href="js/ext/resources/css/ext-all.css"

3) Open up the array-grid.html file in your browser.

Now you have extjs installed with a simple example on how to use it. Next I would like to create a grails controller that returns JSON to populate a simple grid.
at

5 comments:

  1. jonchaseAugust 10, 2008 at 4:23 PM

    Thanks for the helpful post - I hadn't considered automating this before.

    You mention you want to create a controller to return JSON to populate a grid. Good news, your controller method will look something like this:

    def list = {
    def users = User.list()
    render ([total: users.size(), rows: users] as JSON)
    }

    ReplyDelete
  2. AnonymousAugust 11, 2008 at 8:39 PM

    Why not just host the scripts and resources on a web server instead of your project? Do they really need to be included with the project at all (zipped or not)? I mean, it wouldn't work for open source projects but should be fine for internal apps.

    ReplyDelete
  3. jonchaseAugust 11, 2008 at 9:54 PM

    I believe IDEs (like IntelliJ) need the source to offer things like code completion.

    ReplyDelete
  4. AnonymousSeptember 24, 2008 at 9:20 PM

    Thanks James, great post! It helped me a lot!

    ReplyDelete
  5. AnonymousFebruary 8, 2011 at 3:39 PM

    Thanks for the post. It was a great help. See www.astracore.com for our site using grails and ExtJS (+Sencha Touch)

    ReplyDelete