PDA

View Full Version : Grails + ExtJS + JSON



cwi
12 Sep 2008, 3:00 AM
Hello everybody,

I have some problems understanding how it works correctly.
- I have installed the ExtJS-Plugin.
- I've created a domain class called "Product".
- Futher on I generated the controller class and replace the code with the following one:


= == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = ==


import grails.converters.JSON

class ProductController {
def index = { }
def list = {
def pagingConfig = [
max: params.limit ?: 25,
offset: params.start ?: 0,
sort: params.sort ?: 'id',
order: params.dir ?: 'asc'
]
def results = Product.createCriteria().list(pagingConfig) {
5.times {index ->
def field = params["filter[${index}][field]"]
def type = params["filter[${index}][data][type]"]
def value = params["filter[${index}][data][value]"]
if (field && value) {
like(field, "%${value}%" ).ignoreCase()
}
}
}
def json = [
metaData: [
totalProperty: 'totalCount',
root: 'products',
id: 'id',
fields: [
[name: "id", type: "int"],
[name: "name"],
[name: "description"],
[name: "price", type: "float"],
[name: "weight", type: "float"]
],
sortInfo: [
field: pagingConfig.sort,
direction: pagingConfig.order
]
],
totalCount: results.totalCount,
products: results.list
]
render json as JSON
}
}= == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = ==

In my GSP-List-Template I have following code:
(The References to the Javascript-Files are correct)

<html>
<head>
<meta http-equiv="Content-Type" content="application/json; charset=UTF-8"/>
<meta http-equiv="cache-control" content="no-cache">
<meta name="layout" content="main" />
<script type="text/javascript" src="${createLinkTo(dir:'js',file:'ext/adapter/ext/ext-base.js')}"></script>
<script type="text/javascript" src="${createLinkTo(dir:'js',file:'ext/ext-all.js')}"></script>
<script type="text/javascript" src="${createLinkTo(dir:'js',file:'product_array-grid.js')}"></script>
<link rel="stylesheet" href="${createLinkTo(dir:'js',file:'ext/resources/css/ext-all.css')}"></link>
<link rel="stylesheet" href="${createLinkTo(dir:'js',file:'ext/resources/css/theme-aero.css')}"></link>
<title>Product List</title>
</head>
<body>
<h1>Product List</h1>
<div id="ProductGrid"></div>
</html>
= == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = ==
And the referenced product_array-grid.js contains this:



Avail.ProductGrid = Ext.extend(Ext.grid.GridPanel, {
constructor: function(url) {
this.pageSize = 25;
var filters = new Ext.ux.grid.GridFilters({filters:[
{type: 'numeric', dataIndex: 'id'},
{type: 'string', dataIndex: 'name'},
{type: 'string', dataIndex: 'description'},
{type: 'numeric', dataIndex: 'price'},
{type: 'numeric', dataIndex: 'weight'}
]});

var store = new Ext.data.JsonStore({
url: url,
remoteSort: true,
fields: [] // initialized from json metadata
});
var pagingBar = new Ext.PagingToolbar({
pageSize: this.pageSize,
store: store,
displayInfo: true,
displayMsg: 'Displaying products {0} - {1} of {2}',
emptyMsg: "No products to display",
plugins: filters
});
var config = {
store: store,
columns: [
{id:'id', header: "ID", width: 40, sortable: true, dataIndex: 'id'},
{id:'name', header: "Name", width: 160, sortable: true, dataIndex: 'name'},
{id: 'description', header: "Description", width: 75, sortable: true, dataIndex: 'description'},
{id: 'price', header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{id: 'weight', header: "Weight", width: 75, sortable: true, dataIndex: 'weight'}
],
stripeRows: true,
autoExpandColumn: 'description',
height:350,
width:600,
title:'Products',
bbar:pagingBar,
plugins: filters
}
Avail.ProductGrid.superclass.constructor.apply(this, [config])
},

onRender:function() {
this.store.load({params:{start:0, limit:this.pageSize}});
Avail.ProductGrid.superclass.onRender.apply(this, arguments);
}
});
Ext.reg('ProductGrid', Avail.ProductGrid);
= == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = == = ==

Maybe I have some basic problems understanding this thing.. I don't know, but all the code i've found in the www.
Now, when I call http://[...]/products/list (http://%5B...%5D/products/list) my browser wants to _download_ the generated file - instead of dislaying it. It doesn't display anything. For me it seems, that it can't handle the application/json MIME-Type (both FF and IE).
When I replace the line
render json as JSON
with
render json
I get a response. S.th. like

["metaData":["totalProperty":"totalCount", "root":"products", "id":"id", "fields":[["name":"id", "type":"int"], ["name":"name"], ["name":"description"], ["name":"price", "type":"float"], ["name":"weight", "type":"float"]], "sortInfo":["field":"id", "direction":"asc"]], "totalCount":0, "products":[]]Now, can anyone tell me where I'm wrong?

Thank in advance!

Kind regards,
Christopher

13 Sep 2008, 7:07 AM
your JSON is all types of wrong.

Here is good code:

{
"metaData": {
"totalProperty": "totalCount",
"root": "products",
"id": "id",
"totalCount": 0,
"products": [

],
"fields": [
{
"name": "id",
"type": "int"
},
{
"name": "name"
},
{
"name": "description"
},
{
"name": "price",
"type": "float"
},
{
"name": "weight",
"type": "float",
"sortInfo": {
"field": "id",
"direction": "asc"
}
}
]
}
}

cwi
15 Sep 2008, 2:02 AM
Hey jgarcia,

first of all, thanks for your response!

When I replace my JSON-Code with that code you posted, I get compiler errors, saying that

def json = { // <----
"metaData": {
"totalProperty": "totalCount",
is invalid. The opening brace (marked with the arrow) is not valid.
When I change the braces into parenthesis I got the same behaviour as before: Firefox wants me to download the file.

So, there seems to be another problem.. or maybe I did something wrong.

thank you
kind regards,
christopher

15 Sep 2008, 2:53 AM
my point is that your rendered data should look similar to the modified version i provided. You should not include that in your server side code.