View Full Version : how to load data from jsp to Ext.data.ArrayStore (extJS3)

6 Feb 2012, 1:42 AM

This may be simple, but I am new to extJS. After spending a few hours, I couldn't figure the solution myself.

What I want to do is rather simple: I have a jsp web page to display some database record. I follow the basic array grid sample to make the static data work with my display.jsp. I have coded another jsp, called retrieveData.jsp to retrieve some data from database; but I am stuck at how to pass the output of retrieveData.jsp to display.jsp.

my display.jsp uses Ext.data.ArrayStore and Ext.grid.GridPanel to display data; while retrieveData.jsp would output a set of data in string following json format like [['3m Co','abc','71.72','0.02','0.03','9/1 12:00am'],...].

I came across a sample code of Ext.tree.TreePanel, whose loader can be Ext.tree.TreeLoader, which can directly load data from a URL like my retrieveData.jsp. Is there anything for ArrayStore?

Any help is greatly appeciated?

6 Feb 2012, 3:22 AM
if you have your data in an array, you can use store.loadData(array_of_records);

6 Feb 2012, 3:34 AM
Hi Farish,

thx for ur reply. but my data is the output from another jsp file.

I just tested:

var myData = 'retrieveData.jsp'; // which use
var store = new Ext.data.ArrayStore({

It doesn't work.

6 Feb 2012, 4:07 AM
try printing what you get from your jsp file (the array returned) in the console and see if it is the right format. the records should be enclosed in curly braces "{}" i think.

6 Feb 2012, 5:14 AM

This is a ext 4 forum, so I think these readers will act diffently as you see in the Ext4 docs.

6 Feb 2012, 6:00 PM
I don't think var myData = 'retrieveData.jsp'; is the correct syntax to do that.
myData does not take output value from the jsp file, instead it takes the file name as data, which is showed in the GridPanel.

I came across some example using php and Ext.data.JsonReader. Unluckily, I am not familiar with php either; especially how json_encode() works.

6 Feb 2012, 9:39 PM

I've made some progress: now I can trigger retrieveData.jsp from display.jsp, but still cannot display the data in the grid panel.
Here is the extJS code in display.jsp:


// 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());

// sample static data for the store
//var myData = [
// ['3m Co','abc','71.72','0.02','0.03','9/1 12:00am'],
// ['Alcoa Inc','def','29.01','0.42','1.47','9/1 12:00am'],
// ['Altria Group Inc','ghi','83.81','0.28','0.34','9/1 12:00am'],
// ['Wal-Mart Stores, Inc.','jkl','45.45','0.73','1.63','9/1 12:00am']

var history = Ext.data.Record.create([
{name: 'apname', mapping: 1}, // "mapping" only needed if an "id" field is present which
{name: 'ipaddress', mapping: 2}, // precludes using the ordinal position as the index.
{name: 'whodid', mapping: 3},
{name: 'configsettings', mapping: 4},
{name: 'configresult', mapping: 5},
{name: 'configtime', mapping: 6}

var myReader = new Ext.data.ArrayReader({
idIndex: 0
}, history);

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'apname'},
{name: 'ipaddress'},
{name: 'whodid'},
{name: 'configsettings'},
{name: 'configresult'},
{name: 'configtime', type: 'date', dateFormat: 'n/j h:ia'}
proxy: new Ext.data.HttpProxy(
new Ext.data.Connection({
url: 'retrieveData.jsp'
method : 'GET',
autoLoad : true,
reader : myReader

// manually load local data

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'apname',header: 'AP Name', width: 150, sortable: true, dataIndex: 'apname'},
{header: 'IP Address', width: 150, sortable: true, dataIndex: 'ipaddress'},
{header: 'Who Did', width: 150, sortable: true, dataIndex: 'whodid'},
{header: 'Configuration Settings', width: 150, sortable: true, dataIndex: 'configsettings'},
{header: 'Configuration Results', width: 150, sortable: true, dataIndex: 'configresult'},
{header: 'Configuration Time', width: 150, sortable: true, renderer: Ext.util.Format.dateRenderer('Y/m/d h:m'), dataIndex: 'configtime'}
stripeRows: true,
autoExpandColumn: 'apname',
height: 500,
width: 900,
//title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'

// render the grid to the specified div in the page

The output of the retrieveData.jsp is like:

['AP100','','Admin','something','something else','2012-49-10 09:49:32'],
['AP100','','Admin','something','something else','2012-53-10 09:53:04'],
['AP100','','admin','something','something else','2012-03-10 04:03:47']
For this data array, I tried both wrapper {[ and [[; none works. I guess I must miss some setting.

Can anyone tell what is wrong with my extJS script?

6 Feb 2012, 11:59 PM
try this:

{'AP100','','Admin','something','something else','2012-49-10 09:49:32'},
{'AP100','','Admin','something','something else','2012-53-10 09:53:04'},
{'AP100','','admin','something','something else','2012-03-10 04:03:47'}

7 Feb 2012, 12:18 AM
thx, Farish, but it does not work either.

7 Feb 2012, 12:36 AM
Can you post the output of your jsp service plus headers with firebug?

7 Feb 2012, 12:58 AM

I've found the culprit thanks to tvanzoelen (http://www.sencha.com/forum/member.php?32684-tvanzoelen)'s tips.

The retrieveData.jsp had a footer.jsp, which corrupts the data output. I confirm that
[ 'col1','col2', ...],
[ 'col1','col2', ...],

is the right format.

My thanks also go to Farish.
Thank u, guys.

7 Feb 2012, 2:59 AM
don't use a jsp for your controller aspects... - use a controller framework like spring-mvc or at least a servlet for this purpose!

7 Feb 2012, 3:10 AM
I don't quite understand your point, Born. Can you point to some example?

7 Feb 2012, 12:51 PM
It seems to me, that you're using a jsp for your logic aspects and let it return some sort of data... You should consider to use a servlet returning the data you need.. or using the servlet for the logical things and dispatch the request to a jsp where you can collect your data in a request variable and assign this to a js variable...

You may google for servlet or you may consider learning spring-mvc which is somehow more comfortable e.g. for returning Json to the client...