PDA

View Full Version : Json data into grid



TheBigOnion
21 Apr 2010, 11:02 AM
Hello,
has anyone seen an example of putting json data into the grid?

I've seen this one:http://www.extjs.com/deploy/dev/examples/grid/array-grid.js
but the data is not in json format.
They have

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],


but I need


var myData = [
{"Company":"3m Co","cost":71.72,"change":0.02,"profit":0.03,"Date":"9/1 12:00am"},
{"Company":"Alcoa Inc","cost":29.01,"change":0.42,"profit":1.47,"Date":"9/1 12:00am"},



Can I do this?

Thanks
Michael

CrazyEnigma
21 Apr 2010, 11:07 AM
One uses ArrayReader, the other JsonReader. Both are possible, the store doesn't care where the data comes from. Neither does the grid. So long as the store has the proper reader.

mpawlowski
21 Apr 2010, 11:08 AM
Use a JsonStore (http://www.extjs.com/deploy/dev/docs/?class=Ext.data.JsonStore) rather than an ArrayStore

TheBigOnion
21 Apr 2010, 12:21 PM
Thanks.
I found this: http://extjs.org.cn/extjs/examples/grid/json-grid.js

But how do I do it if I want to use Ext.Ajax.request instead of Ext.data.HttpProxy???

mpawlowski
21 Apr 2010, 12:44 PM
Once you get a result from the Ajax.request, load the relevant data directly into the store using the loadData() method.

TheBigOnion
22 Apr 2010, 10:02 AM
Can I get an example please?

rbastic
22 Apr 2010, 10:26 AM
I do it this way. Include this lib at the top:



<script type="text/javascript" src="<%=BaseServlet.getAppRootDir()%>/js/ext-3.0/examples/ux/PagingMemoryProxy.js"></script>



THEN:



myApp.showLoading(); // displays a loading widget

Ext.Ajax.request({
url: 'blah.jsp',
params: yourParms,
success: function(result, request) {
var rpText = result.responseText;
var json = Ext.decode(rpText);

yourStore.proxy.data = json;
yourStore.load();

yourApp.hideLoading();
},
failure: function(result, request) {
yourApp.hideLoading();
Ext.MessageBox.alert('Error', 'The server was unable to be contacted.');
}
});


The code that I use for showLoading() and hideLoading() is also as follows:


var myApp = {
'showLoading' : function() {
Ext.MessageBox.show({
msg: 'Loading...',
progressText: 'Loading...',
width:300,
wait:true,
waitConfig: {interval:200}
});
},
'hideLoading' : function() {
Ext.MessageBox.hide();
},
};


It's that easy. Just include PagingMemoryProxy, set yourStore.proxy.data, and call yourStore.load().

The loading widgets are obviously unnecessary, but can be a nice touch.

TheBigOnion
22 Apr 2010, 10:54 AM
I need to be able to do this: http://www.java2s.com/Code/JavaScript/Ext-JS/LoadJsonStoretoGridPanel.htm
but with AJAX.

mpawlowski
22 Apr 2010, 12:21 PM
http://www.extjs.com/deploy/dev/docs/?class=Ext.Ajax

CrazyEnigma
23 Apr 2010, 6:15 AM
Uhhhh, EXT JS is AJAX!!!

Either:
Create a grid with a JsonStore that uses a JsonReader

or

Create a grid with a JsonStore, and use an Ext.Ajax.request, that wraps the XHR to get the information, and then send the data to the JsonStore using the loadData() method as mentioned in previous posts.

Essentially, the JsonReader wraps the Ext.Ajax.request, so you don't have to go the XHR route or the Ext.Ajax.request route.

If you need to get something else, just get the store, and call the load() method with new parameters.

The bottom line is: it is best to play with the framework, to fully understand what you are doing.

TheBigOnion
4 May 2010, 6:48 AM
Hello,
when I run:


var jStore = new Ext.data.JsonStore({
autoDestroy: true,
url: myURL,
storeId: 'gridStore',
idProperty: 'name',
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
});Ext.Msg.alert('Store:', jStore.getCount());


my alert box is blank.

But when I run:


Ext.Ajax.request({
url: myURL,
params: 'type=getGrid',
success: function(result, request){
alert("Ajax result:" + result.responseText);
}
});
My alert box shows all my json return correctly.

How can I get the jsonStore to work? or how can I just use the AJAX one?

Thanks.

CrazyEnigma
4 May 2010, 11:09 AM
Either set:


autoLoad: true
or use:


jStore.load({params: <your params object>});


And your call is asynchronous, so the data may not get there before you called the alert, so you will need to add a "load" listener in the store to actually get the count.