PDA

View Full Version : Using Grids with JSP



latika
8 Jul 2010, 9:24 AM
Can anyone help out with this? How do I pass data from a jsp/java to display on a grid for viewing/editing?

I have just started with extjs and I took the sample array-grid.html and modified it for my purpose. But I still have no idea how to pass/load dynamic data to/on the grid.

I will really appreciate all the ideas, suggestions, examples, sample codes.

Animal
8 Jul 2010, 9:34 AM
Use Crockford's JSON classes from json.org

Create each row of data as a JSONArray.

Put each row into one large JSONArray.

Write that into your page as the data var:


var data = <%=myJSONArrayOfRows.toString()%>;
var store = new Ext.data.Store({
... your configs...,
data: data
});

latika
8 Jul 2010, 9:50 AM
Here is my jsp page code:
<%--
Document : TestingGrid
Created on : Jul 7, 2010, 8:06:29 AM
--%>
<%@page import="java.util.*, Utilities.*, gen.Globals, javax.servlet.RequestDispatcher" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%
This is where I build the array
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stateful Array Grid Example</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="/oit/OIT_EntAppSearch/css/ext-all.css" />
<!-- overrides to base library -->
<!-- page specific -->
<link rel="stylesheet" type="text/css" href="/oit/OIT_EntAppSearch/css/examples.css" />
<link rel="stylesheet" type="text/css" href="/oit/OIT_EntAppSearch/css/grid-examples.css" />
<style type="text/css">
/* style rows on mouseover */
.x-grid3-row-over .x-grid3-cell-inner {
font-weight: bold;
}
</style>
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="/oit/OIT_EntAppSearch/js/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="/oit/OIT_EntAppSearch/js/ext/ext-all-debug.js"></script>
<!-- overrides to base library -->

<!-- page specific -->
<script type="text/javascript" language="Javascript">
/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function(){
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var myData = <%= myDB %>;

//var myData = [['polarset','TestApp','apps5','1524','111.255.45.20','abbott16.state.us']];
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'srv'},
{name: 'app'},
{name: 'inst'},
{name: 'port'},
{name: 'ip'},
{name: 'db'}
]
});
// manually load local data
store.loadData(myData);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'srv', header: 'Server', width: 150, sortable: true, dataIndex: 'srv'},
{header: 'Application', width: 150, sortable: true, dataIndex: 'app'},
{header: 'Instance', width: 75, sortable: true, dataIndex: 'inst'},
{header: 'DB Port', width: 125, sortable: false, dataIndex: 'port'},
{header: 'DB IP Address', width: 100, sortable: true, dataIndex: 'ip'},
{header: 'DB Name', width: 150, sortable: true, dataIndex: 'db'},
],
stripeRows: true,
autoExpandColumn: 'srv',
height: 350,
width: 750,
title: 'Server-Application Search Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
/*
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
*/
// render the grid to the specified div in the page
grid.render('grid-example');
});
</script>
</head>
<body>
<h1>Stateful Array Grid Example</h1>
<p>This example shows how to create a grid from Array data.</p>
<p>The grid is stateful so you can move or hide columns, reload the page, and come
back to the grid in the same state you left it in.</p>
<p>Note that the js is not minified so it is readable. See <a href="array-grid.js">array-grid.js</a>.</p>
<div id="grid-example"></div>
</body>
</html>

But everytime I run it , I get the following error:
'id' is null or not an object line 45545 Char 13 of ext-all-debug.js

Animal
8 Jul 2010, 10:06 AM
So debug.

And post in code tags.

latika
8 Jul 2010, 10:27 AM
Thanks Animal!

I have tried to debug but as I said in first post, I am just learning extjs. So, debugging someone else code to see where my errors are, especially if that file is 50000 lines is daunting. I thought it would be something simple that someone can spot or occurs often enough to tell.

Here is my code in code tags.

When I view the source of the page in browser, I see the data in variable myData. It just does not render the grid.

My changes are in bold + red. The rest are from sample array-grid.html & array-grid.js

I really appreciate your help.
Thanks.



<%--
Document : TestingGrid
Created on : Jul 7, 2010, 8:06:29 AM
--%>
<%@page import="java.util.*, Utilities.*, gen.Globals, javax.servlet.RequestDispatcher" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%
This is where I build the array
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stateful Array Grid Example</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="/oit/OIT_EntAppSearch/css/ext-all.css" />
<!-- overrides to base library -->
<!-- page specific -->
<link rel="stylesheet" type="text/css" href="/oit/OIT_EntAppSearch/css/examples.css" />
<link rel="stylesheet" type="text/css" href="/oit/OIT_EntAppSearch/css/grid-examples.css" />
<style type="text/css">
/* style rows on mouseover */
.x-grid3-row-over .x-grid3-cell-inner {
font-weight: bold;
}
</style>
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="/oit/OIT_EntAppSearch/js/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="/oit/OIT_EntAppSearch/js/ext/ext-all-debug.js"></script>
<!-- overrides to base library -->

<!-- page specific -->
<script type="text/javascript" language="Javascript">
/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/


Ext.onReady(function(){
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var myData = <%= myDB %>;


// -- Actual Data when I view page source --
//var myData = [['polarset','TestApp','apps5','1524','111.255.45.20','abbott16.state.us']];

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'srv'},
{name: 'app'},
{name: 'inst'},
{name: 'port'},
{name: 'ip'},
{name: 'db'}
]
});

// manually load local data
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'srv', header: 'Server', width: 150, sortable: true, dataIndex: 'srv'},
{header: 'Application', width: 150, sortable: true, dataIndex: 'app'},
{header: 'Instance', width: 75, sortable: true, dataIndex: 'inst'},
{header: 'DB Port', width: 125, sortable: false, dataIndex: 'port'},
{header: 'DB IP Address', width: 100, sortable: true, dataIndex: 'ip'},
{header: 'DB Name', width: 150, sortable: true, dataIndex: 'db'},
],
stripeRows: true,
autoExpandColumn: 'srv',
height: 350,
width: 750,
title: 'Server-Application Search Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});


// render the grid to the specified div in the page
grid.render('grid-example');
});
</script>

</head>

<body>
<h1>Stateful Array Grid Example</h1>
<p>This example shows how to create a grid from Array data.</p>
<p>The grid is stateful so you can move or hide columns, reload the page, and come
back to the grid in the same state you left it in.</p>
<p>Note that the js is not minified so it is readable. See <a href="array-grid.js">array-grid.js</a>.</p>

<div id="grid-example"></div>
</body>
</html>

latika
8 Jul 2010, 10:33 AM
Here is the piece from the ext-all-debug.js and the line where it stops on error




this.defaults = Ext.apply({
width: this.defaultWidth,
sortable: this.defaultSortable
}, this.defaults);
this.config = config;
this.lookup = {};
for(i = 0, len = config.length; i < len; i++){
c = Ext.applyIf(config[i], this.defaults);

if(Ext.isEmpty(c.id)){
c.id = i;
}
if(!c.isColumn){
var Cls = Ext.grid.Column.types[c.xtype || 'gridcolumn'];
c = new Cls(c);
config[i] = c;
}
this.lookup[c.id] = c;
}
if(!initial){
this.fireEvent('configchange', this);
}
},

Animal
8 Jul 2010, 11:07 AM
Break on the error and see what's wrong with your ColumnModel

latika
8 Jul 2010, 11:24 AM
THANKS Animal!!!!

Found it :"> --- Guess I just needed to vent my frustration?
Thanks for narrowing it down.
I have a comma after the last column config :D



columns: [
{id:'srv', header: 'Server', width: 150, sortable: true, dataIndex: 'srv'},
{header: 'Application', width: 150, sortable: true, dataIndex: 'app'},
{header: 'Instance', width: 75, sortable: true, dataIndex: 'inst'},
{header: 'DB Port', width: 125, sortable: false, dataIndex: 'port'},
{header: 'DB IP Address', width: 100, sortable: true, dataIndex: 'ip'},
{header: 'DB Name', width: 150, sortable: true, dataIndex: 'db'},
],

latika
8 Jul 2010, 11:27 AM
By the way Breaking on the error didn't do anything.
It is the word "ColumnModel" in your comment that did it.