August 25th, 2008 by jeff
At my current contract, I’ve been using the popular EXTJS javascript library. In order to get up to speed faster, I’ve started a small project to assist my learning.
I thought about using a number of back ends to support my project, but decided on Grails after reading about the built-in JSON converters.
Getting started note: Since this is a dirt simple example, I copied extjs into the web-app/js directory. James Lorenzen looks like he has a better way, and there might be a plugin some day.
I started with a simple GORM object, Media, which looks like this:
class Media {
static constraints = {
releaseDate(nullable: true)
}
String title
Date releaseDate
Date dateCreated
Date lastUpdated
}
Next I added some startup data by adding it to to Bootstrap.groovy class:
def m = new Media(releaseDate:null, title: 'Test')
m.save()
And added a controller:
import grails.converters.*
class MediaController {
def view = {
}
def list = {
def listResult = [ total: Media.count(), items: Media.list(params)]
render listResult as JSON
}
}
And I now have a Grails back end that will deliver JSON to extjs! Off to the front end!
First I modified my layout, main.gsp, to add the extjs js and css files:
<html>
<head>
<title><g:layoutTitle default="Grails" /></title>
<link rel="stylesheet" href="${createLinkTo(dir:'js',file:'ext-2.2/resources/css/ext-all.css')}"></link>
<link rel="stylesheet" href="${createLinkTo(dir:'js',file:'ext-2.2/resources/css/theme-aero.css')}"></link>
<script type="text/javascript" src="${createLinkTo(dir:'js',file:'ext-2.2/adapter/ext/ext-base.js')}"></script>
<script type="text/javascript" src="${createLinkTo(dir:'js',file:'ext-2.2/ext-all-debug.js')}"></script>
<script type="text/javascript" charset="utf-8">
Ext.BLANK_IMAGE_URL = "${createLinkTo(dir:'js',file:'ext-2.2/resources/images/default/s.gif')}";
</script>
<g:layoutHead />
</head>
<body>
<div id="container">
<div id="content">
<div id="include">
<g:layoutBody />
</div>
</div>
</div>
</body>
</html>
and added my view.gsp:
<html>
<head>
<meta name="layout" content="main" />
<title>Decorated</title>
<script type="text/javascript" src="${createLinkTo(dir:'js',file:'oscar.js')}"></script>
</head>
<body>
<div id="center-div"></div>
</body>
</html>
and lastly, my js file, taken nearly verbatim from an extjs example:
/*
* Ext JS Library 2.0 Beta 1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
// create the Data Store
var ds = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: 'http://localhost:8080/oscar/media/list'}),
reader: new Ext.data.JsonReader({
results: 'total',
root:'items',
id:'id'
},
[
{name: 'title'},
{name: 'dateCreated'},
{name: 'lastUpdated'},
{name: 'releaseDate'}
]
)
});
var cm = new Ext.grid.ColumnModel([
{header: "Title", width: 120, dataIndex: 'title'},
{header: "Created Date", width: 180, dataIndex: 'dateCreated'},
{header: "Last Updated", width: 115, dataIndex: 'lastUpdated'},
{header: "releaseDate", width: 100, dataIndex: 'releaseDate'}
]);
cm.defaultSortable = true;
// create the grid
var grid = new Ext.grid.GridPanel({
ds: ds,
cm: cm,
renderTo:'center-div',
width:540,
height:200
});
});
My code is checked in here.
Posted in CodeSnippets, Groovy, Java, Tutorials, Web | 4 Comments »