PDA

View Full Version : Help on Using JSON from Grails to Write a Grid



krishnaswamy
16 Jul 2010, 3:50 PM
Hi
Below are my code snippets,

Grails Controller

def list = {
def txs = [rows:[]]
def family = Family.findAll("from Family as fam where fam.closeDate > '1-jan-2010'").each {
txs["rows"] << [id: it.id, familyName: it.familyName, restrictFlag:it.restrictFlag, closeDate: it.closeDate,commitments:it.commitments]
}
render txs as JSON
}
---------------------------------------------------------
list.gsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="main" />
<g:set var="entityName" value="${message(code: 'family.label', default: 'Family')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
<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>
<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-debug.js')}"></script>
<script type="text/javascript" charset="utf-8">
Ext.BLANK_IMAGE_URL ="${createLinkTo(dir:'js',file:'ext/resources/images/default/s.gif')}";
</script>
<script type="text/javascript" src="${createLinkTo(dir:'js',file:'mygrid.js')}"></script>
</head>
<body>
<div class="body">
<div id="center-div"></div>
</div>
</body>
</html>
--------------------------------------------------------
mygrid.js
Ext.onReady(function(){

var proxy=new Ext.data.HttpProxy({url:'/myapp/family/list'});

var reader=new Ext.data.JsonReader(
{
},[
{name: 'id', mapping: 'id'},
{name: 'brokerRestrictFlag'},
{name: 'closeDate'},
{name: 'familyName'}
]
)
var store=new Ext.data.Store( {
proxy:proxy,
reader:reader
});

store.load();
alert(store.data.length)

// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Family Id", width: 120, dataIndex: 'id'},
{header: "Restrict Flag", width: 180, dataIndex: 'restrictFlag'},
{header: "Close Date", width: 115, dataIndex: 'closeDate'},
{header: "Family Name", width: 100, dataIndex: 'familyName'}
],
renderTo:'center-div',
width:540,
height:200
});
});

------------------------
but when try to access http://localhost:8080/myapp/family/list
{"rows":[{""id":"6103F","familyName":"The Osborn","restrictFlag":"N","closeDate":"2010-03-01T05:00:00Z","commitments":[]}]}


i am getting the json string printed in browser, the data is not getting into Grid,
If i comment the render as JSON line in my controller then the onready functions is getting called, but no data :(
Am i doing any silly mistake here

18 Jul 2010, 10:48 AM
the first mistake is not posting your code within code tags. :)

I don't see you configure a root to your jsonReader (rows).