Question

Has anyone built a grails app using extjs as the frontend?

Are there any pitfalls or gotchas that you’d care to share?

It looks like the JSON format output by grails by default it quite different from what extjs expects, but is it just a matter of customising the JSON on the grails side?

Answer 1

I’m using the combination Grails + ExtJS a lot and it’s quite easy to implement. The JSON Output for grids can be easily achieved by doing something like this in your controllers:

def list = {
   def books = Book.list(params)    
   render( [ items: books, totalCount: Book.count() ] as JSON )
}

this will produce “Ext-compatible” JSON like:

{"items":[{"class":"Book","id":1,"title:"The Definitive Guide to Grails","author":"Graeme Rocher",...

this is an example on how you should initialize the JsonStore:

var store = new Ext.data.JsonStore({
   url: '${createLink( action: 'list' )}',
   root: 'items',
   totalProperty: 'totalCount',
   fields: [ 'id','title','author','isdn', 'dateCreated' ],
   paramNames: { start : "offset", limit :"max", sort : "sort", dir : "order" }
});

When dealing with Date values, it is IMO the best practice to enable the Javascript Date format for the JSON Converter (ie. date values will be rendered as new Date(123123123) instead of the default format “2009-04-16T00:00:00Z”), so you don’t have to care about date format or timezone stuff. You can do this by configuring it in your grails-app/conf/Config.groovy:

grails.converters.json.date = 'javascript'

I’ve also implemented the server-side functionality for the grid filter plugin, various combinations of combo box implementations (with remote auto-completion), trees, forms etc. If you want to see more example code for that, let me know.

ExtJS 3.0 (currently RC) integrates even better with Grails, as the DataStores provides the option to send data back to the backend to get persisted. The Ext.Direct approach provides new possibilities as well 🙂