PDA

View Full Version : How to display the data in grid



chethanar
14 May 2009, 2:39 AM
Hi,
I am new to EXTJS, I want to display the data in the Grid with Store using JSP.When I execute the JSP, I get the response data from backend servlet in JSON format but somehow it does not get mapped to the page as my grid is empty.

Ext.onReady(function(){

Ext.QuickTips.init();

var bd = Ext.getBody();

var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'http://localhost:9080/ExtJsServlet/servlet/extjs.servlet.ComboBoxServlet'

}),

reader: new Ext.data.JsonReader({
root:'gridData'
},
['lastChange', 'company' ,
'price' ,
'change',
'pctChange'
]
)

});


var grid = new Ext.grid.GridPanel({
renderTo:document.body,
frame:true,
title:'Movie DB',
height:200,
width:500,
store:store,
columns:[
{header: "Last Updated", width: 85, sortable: true, dataIndex: 'lastChange'},
{header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'}

]


//stripeRows:true

});


store.on({
'load':{
fn: function(store, records, options){
console.log('01 - Data Store listener fired (load), arguments:',store.reader);
console.log(' this:',this);

}
,scope:this
}
,'loadexception':{
fn: function(httpProxy, dataObject, arguments, exception){
console.info('store loadexception, arguments:', arguments);
console.info('error = ', exception);
console.info('response = ', dataObject);

}
,scope:this
}
});




grid.render(document.body);
store.load();
});



The JSON Response as it is received from the server :

{"gridData":{"lastChange":"XX","company":"XX","pctChange":"333.00","price":"100.00","change":"34.00"}}



Kindly Help

Animal
14 May 2009, 2:53 AM
You have to really read the documentation as well as copy/paste example code.

http://extjs.com/deploy/ext-3.0-rc1.1/docs/?class=Ext.data.JsonReader

carol.ext
14 May 2009, 6:48 AM
Is the load handler or the loadexception handler called?

Animal
14 May 2009, 7:41 AM
Look at the JSON.

Does it look like the example?

What if you require to send multiple rows?

carol.ext
14 May 2009, 7:45 AM
Your code would be easier to read if it were formatted. See the help guide for how to use code tags (http://extjs.com/learn/Ext_Forum_Help).

The JSON format does not appear to be your only problem. I don't see that the reader is configured on the store. Oh no, my bad...I couldn't see that it is because of the lack of formatting.