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
});
});
![[del.icio.us]](http://images.del.icio.us/static/img/delicious.small.gif){kind=small}
6 Comments
Great Example! Thanks
Hi,
I wanted to download your code to test it.
How do I do it?
Thanks
JIm
Use the provided link at the bottom of post. I’ve checked it in to svn.
Hi! long term use seroquel side effects
Hi,
have you come accross any one trying to integrate SEAM and GWT Ext?
I’m on my way to trying this out, but haven’t come accross a lot of people that used it
many thanks
a
I have not used GWT Ext or SEAM, sorry.
Post a Comment