Forum:

HTML Pages with CSS and JavaScript

Ext JS: how to populate grid with values from servlet

Greenhorn

Posts: 13

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,
I am new to EXT js .In my project i need to add a grid which pulls data from the database.I have done a grid and created Json data but the json data is not getting displayed.Pasted the code for refrence.Please help.

TreeServlet
This creates the json data for the grid.

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONException;
import net.sf.json.JSONObject;
/**
* Servlet implementation class TreeServlet
*/
public class TreeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
* @see HttpServlet#HttpServlet()
*/
public TreeServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("God");
request.getRequestDispatcher("/treegridExt.jsp").forward(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//int node = Integer.parseInt(request.getParameter("node"));
//System.out.println("node: " + node); // just for debug purposes

try
{
//String jsonResult = createTree(node).toString();
String jsonResultForGrid=createTreeForGrid().toString();
//System.out.println("result: " + jsonResult); // just for debug purposes
System.out.println("result: " + jsonResultForGrid);
//response.getOutputStream().write(jsonResultForGrid.getBytes());
response.getOutputStream().write(jsonResultForGrid.getBytes());
}
catch (JSONException e)
{
throw new ServletException(e);
}
}
private Object createTreeForGrid() {

JSONArray jarr = new JSONArray();
JSONObject jobj = new JSONObject();
jobj.accumulate("id", "1");
jobj.accumulate("email", "email");
jobj.accumulate("first","first");
jobj.accumulate("last", "last");

jarr.add(jobj);
JSONObject obj = new JSONObject();
obj.accumulate("id", "2");
obj.accumulate("email", "god@ymail.com");
obj.accumulate("first","god");
obj.accumulate("last", "god");
jarr.add(obj);
JSONObject obj1 = new JSONObject();
obj1.accumulate("id", "3");
obj1.accumulate("email", "god@gmail.com");
obj1.accumulate("first","god1");
obj1.accumulate("last", "god1");
jarr.add(obj1);

return jarr;
}
private JSONArray createTree(int node) throws JSONException {
if (node == 0)
{
JSONArray array = new JSONArray();
Node guitars = new Node(1, "Guitars");
guitars.setLeaf(false);
array.add(guitars.toJson());

Node violins = new Node(2, "Violins");
array.add(violins.toJson());

Node veenas = new Node(3, "Veena");
veenas.setLeaf(false);
array.add(veenas.toJson());

return array;
}

if (node == 1)
{
JSONArray array = new JSONArray();

Node acoustic = new Node(11, "Acoustic");
acoustic.setLeaf(false);
array.add(acoustic.toJson());

Node electric = new Node(12, "Electric");
electric.setLeaf(false);
array.add(electric.toJson());

Node semihollow = new Node(13, "Semihollow");
array.add(semihollow.toJson());

return array;
}

if(node==3){
JSONArray array = new JSONArray();

Node paint = new Node(14,"Canvas");
paint.setLeaf(false);
array.add(paint.toJson());

return array;

}

if (node == 11)
{
JSONArray array = new JSONArray();

Node taylor = new Node(110, "Taylor");
array.add(taylor.toJson());

Node martin = new Node(111, "Martin");
array.add(martin.toJson());

Node alvarez = new Node(112, "Alvarez Yairi");
array.add(alvarez.toJson());

return array;
}

if (node == 12)
{
JSONArray array = new JSONArray();

Node fender = new Node(120, "Fender");
array.add(fender.toJson());

Node gibson = new Node(121, "Gibson");
array.add(gibson.toJson());

return array;
}

return null;
}

}

Index.jspThis renders the grid,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>HTML Page setup Tutorial</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript"
src="resources/js/ext-3.2.1/adapter/ext/ext-base.js"></script>

<script type="text/javascript"
src="resources/js/ext-3.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="resources/js/ext-3.2.1/ext-all.js"></script>

<div id="user-grid"> </div>
<script type="text/javascript">
// Path to the blank image should point to a valid location on your server
Ext.BLANK_IMAGE_URL = '/resources/images/default/s.gif';
//var App = new Ext.App({});

// Create a standard HttpProxy instance.
var proxy = new Ext.data.HttpProxy({
url: '/TreeGridUsingEXT/TreeServlet.do',
method:'POST'
});
// Typical JsonReader. Notice additional meta-data params for defining the core attributes of your json-response
var reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'id',
root: 'data',
messageProperty: 'message' // <-- New "messageProperty" meta-data
}, [
{name: 'id'},
{name: 'email', allowBlank: false},
{name: 'first', allowBlank: false},
{name: 'last', allowBlank: false}
]);
// The new DataWriter component.
var writer = new Ext.data.JsonWriter({
encode: true // <-- don't return encoded JSON -- causes Ext.Ajax#request to send data using jsonData config rather than HTTP params
});
// Typical Store collecting the Proxy, Reader and Writer together.
var store = new Ext.data.JsonStore({
id: 'id',
// <-- This Store is RESTful
proxy: proxy,
reader: reader,
root: 'data',
writer: writer
});
// load the store immeditately
store.load();
////
// ***New*** centralized listening of DataProxy events "beforewrite", "write" and "writeexception"
// upon Ext.data.DataProxy class. This is handy for centralizing user-feedback messaging into one place rather than
// attaching listenrs to EACH Store.
//
// Listen to all DataProxy beforewrite events
//
Ext.data.DataProxy.addListener('beforewrite', function(proxy, action) {
//App.setAlert(App.STATUS_NOTICE, "Before " + action);
});
////
// all write events
//
Ext.data.DataProxy.addListener('write', function(proxy, action, result, res, rs) {
//App.setAlert(true, action + ':' + res.message);
});
////
// all exception events
//
Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) {
// App.setAlert(false, "Something bad happend while executing " + action);
});
// Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
var userColumns = [
{header: "ID", width: 40, sortable: true, dataIndex: 'id'},
{header: "Email", width: 100, sortable: true, dataIndex: 'email'}, //editor: new Ext.form.TextField({})},
{header: "First", width: 50, sortable: true, dataIndex: 'first'}, //editor: new Ext.form.TextField({})},
{header: "Last", width: 50, sortable: true, dataIndex: 'last'} //editor: new Ext.form.TextField({})}
];

Ext.onReady(function() {
Ext.QuickTips.init();
// use RowEditor for editing
// var editor = new Ext.ux.grid.RowEditor({
// saveText: 'Update'
// });
// Create a typical GridPanel with RowEditor plugin
var userGrid = new Ext.grid.GridPanel({
renderTo: 'user-grid',
iconCls: 'icon-grid',
frame: true,
title: 'Users',
height: 300,
store: store,
// plugins: [editor],
columns : userColumns,
tbar: [{
text: 'Add',
iconCls: 'silk-add',
handler: onAdd
}, '-', {
text: 'Delete',
iconCls: 'silk-delete',
handler: onDelete
}, '-'],
viewConfig: {
forceFit: true
}
});
/**
* onAdd
*/
function onAdd(btn, ev) {
var u = new userGrid.store.recordType({
first : '',
last: '',
email : ''
});
// editor.stopEditing();
userGrid.store.insert(0, u);
// editor.startEditing(0);
}
/**
* onDelete
*/
function onDelete() {
var rec = userGrid.getSelectionModel().getSelected();
if (!rec) {
return false;
}
userGrid.store.remove(rec);
}
});

</script>

</head>
<body>
</body>
</html> 
</code>

Bear Bibeault

Sheriff

Posts: 67754

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

It's good that you used code tags, but they are not very useful if you do not properly indent your code. It's unreadable as is.

Have you checked that the response is correct?

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Vi Mani

Greenhorn

Posts: 13

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,

This is the response.

{"total":"20","data":[{"id":"1","email":"email","first":"first","last":"last"},{"id":"2","email":"[email protected]","first":"god","last":"god"},{"id":"3","email":"[email protected]","first":"god1","last":"god1"}]}

Thanks In Advance,
Vmani

Vi Mani

Greenhorn

Posts: 13

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,

I am getting loadException.What could be cause of this exception?Please help...

Thanks in advance
Vmani

Eric Pascarello

author

Posts: 15385

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

There is really no one here that uses Dojo, have you tried asking it on their community? http://dojotoolkit.org/community/

Vi Mani

Greenhorn

Posts: 13

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

thanks for your help.I have posted this in that community .

With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.