PDA

View Full Version : ExtJS-Json-JSP-Struts2



milton9480
30 Nov 2009, 3:02 AM
Hello,
I have few problems to interact with ExtJS using Json and Struts.
I've a JSP page with a div content that render a grid. I've a JS file that creates and load the grid. The datastore of the grid is the result of an action invocation "proxy: new Ext.data.ScriptTagProxy({url:'Test_getDeportes.action'}),".
The server receive the request, but the response does not reach the client, and Console reply with a parameter Warning, but no errors.

Following is the full code.
Thanks in advance.

Grid JS:


var GridUI = function() {

var ds; //hold our data
var grid; //component
var columnModel; // definition of the columns

function setupDataSource() {
ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({url:'Test_getDeportes.action'}),
reader: new Ext.data.JsonReader(
{root: 'deportes', id: 'id'},
[
{name: 'id'},
{name: 'nombre'}
]
)
}
);
ds.load();
}

function getColumnModel() {
if(!columnModel) {
columnModel = new Ext.grid.ColumnModel(
[
{
header: 'Identificador',
width: 50,
sortable: true,
dataIndex: 'id'
},

{
header: 'Nombre',
width:250,
sortable: true,
dataIndex: 'nombre'
},
]
);
}
return columnModel;
}

function buildGrid() {
grid = new Ext.grid.Grid(
'sportsgrid',
{
ds: ds,
cm: getColumnModel(),
autoSizeColumns: true
}
);

grid.on("rowdblclick", function(grid) {
alert(grid.getSelectionModel().getSelected().data.nombre);
});

grid.render();
}

return {
init : function() {
setupDataSource();
buildGrid();
},

getDataSource: function() {
return ds;
}
}
}();

Ext.onReady(GridUI.init, GridUI, true);


JSP Page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="./js/yui-utilities.js" type="text/javascript"></script>
<script src="./js/ext-yui-adapter.js" type="text/javascript"></script>
<script src="./js/ext-all-debug.js" type="text/javascript"></script>
<script src="./js/gridDeportes.js" type="text/javascript"></script>

<link href="./css/ext-all.css" media="screen" rel="Stylesheet" type="text/css" />

</head>

<body>
<div id="sportsgrid"
style="border: 1px solid #99bbe8; overflow: hidden; height: 300px;"></div>
</body>
</html>


Action java:


package com.desafiodt.controller;

import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import org.json.JSONArray;
import org.json.JSONObject;

import com.desafiodt.model.Deporte;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.Preparable;

public class TestAction extends ActionSupport implements Preparable {

private static final long serialVersionUID = 1L;

private List<Deporte> listaDeportes;

private JSONObject jsonObject;

public void setJsonObject(JSONObject jsonObject) {
this.jsonObject = jsonObject;
}

public JSONObject getJsonObject() {
return jsonObject;
}

@Override
public void prepare() throws Exception {

}

public String input() {
return INPUT;
}

private void GenerarDeportesDummy() {
this.listaDeportes = new ArrayList<Deporte>();
Deporte d;
for (int i = 0; i < 10; i++) {
d = new Deporte();
d.setId(i);
d.setNombre("Futbol " + i);
this.listaDeportes.add(d);
}
}

public String getDeportes() {
this.GenerarDeportesDummy();

jsonObject = new JSONObject();
JSONArray jsonItems = new JSONArray();
for (Iterator iter = this.listaDeportes.iterator(); iter.hasNext();) {
JSONObject innerJson = new JSONObject();
innerJson.put("id", ((Deporte)iter.next()).getId());
innerJson.put("nombre", ((Deporte)iter.next()).getNombre());
jsonItems.put(innerJson);
}
jsonObject.put("deportes", jsonItems);

return SUCCESS;
}

public List<Deporte> getListaDeportes() {
return listaDeportes;
}

public void setListaDeportes(List<Deporte> listaDeportes) {
this.listaDeportes = listaDeportes;
}

}



Struts config xml:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
<constant name="struts.enable.DynamicMethodInvocation" value="false" />
<constant name="struts.devMode" value="false" />
<constant name="struts.ui.theme" value="simple" />

<!-- Add packages here -->
<package name="DesafioDT" namespace="/" extends="struts-default,json-default">

<action name="Test_*" method="{1}"
class="com.desafiodt.controller.TestAction">
<result name="input">/test.jsp</result>
<result name="success" type="json">
<param name="contentType">application/json</param>
</result>
</action>
</package>
</struts>

milton9480
15 Feb 2010, 8:19 PM
I'm still waiting for someone answer I-|I-|. Is anyone there ? :((

bclinton
15 Feb 2010, 8:49 PM
Are you intentionally using ScriptTagProxy?

http://www.extjs.com/deploy/dev/docs/?class=Ext.data.ScriptTagProxy


The content passed back from a server resource requested by a ScriptTagProxy must be executable JavaScript source code because it is used as the source inside a <script> tag.

Can you copy the response body from your Firebug console and post it (the json your server is returning)?

milton9480
15 Feb 2010, 8:56 PM
Dear bclinton, thanks for your reply. After few months, help comes :D
I'll get the info that you are requesting. I'll ping you then.
Again, thanks for your reply. I'm really interested to use this framework features.