PDA

View Full Version : unable to show JSON data into Grid



Ankit.Desai
20 Sep 2011, 11:32 AM
Unable to show JSON data into Grid. I got blank grid but you can see sequence no "1" and blank row, though number 1 is auto generated, it is not a JSON data.

Below is the code.


Ext.onReady(function(){


// PRESSURE GRID - PRESSURE TAB //

var proxy=new Ext.data.HttpProxy( {url:'',method: 'POST'} );

Ext.define('pressureModel', {
extend: 'Ext.data.Model',
fields: ['month', 'KOD', 'timePeriod', 'beachBank', 'manMade', 'charterBoat', 'privateRentalBoat']
});

var pressureGridStore=new Ext.data.Store({
id: "pressureG",
model: 'pressureModel',
proxy: proxy,
reader:new Ext.data.JsonReader({
type : 'json',
root: 'pressureFi',
totalProperty: 'pressureResultLength'
},[{name:'month'},{name:'KOD'},{name:'timePeriod'},{name:'beachBank'},{name:'manMade'},{name:'charterBoat'},{name:'privateRentalBoat'}]
)
});



// Generic fields array to use in both store defs.
var pressureFields = [
{name: 'month', mapping: 'month', type: 'string'},
{name: 'KOD', mapping: 'KOD', type: 'string'},
{name: 'timePeriod', mapping: 'timePeriod', type: 'string'},
{name: 'beachBank', mapping: 'beachBank', type: 'string'},
{name: 'manMade', mapping: 'manMade', type: 'string'},
{name: 'charterBoat', mapping: 'charterBoat', type: 'string'},
{name: 'privateRentalBoat', mapping: 'privateRentalBoat', type: 'string'}
];



var pressureGrid = new Ext.grid.GridPanel({
id : "pressure-grid",
ddGroup : 'gridDDGroup',
store : pressureGridStore,
columns: [new Ext.grid.RowNumberer(),
{
text: 'Month',
width: 70,
dataIndex: 'month'
},{
text: 'Kind of Day',
width: 85,
dataIndex: 'KOD'
},{
text: 'Time Period',
width: 95,
dataIndex: 'month'
},{
text: 'Beach/Bank',
width: 65,
dataIndex: 'beachBank'
},{
text: 'Man/Made',
width: 65,
dataIndex: 'manMade'
},{
text: 'Charter Boat',
width: 75,
dataIndex: 'charterBoat'
},{
text: 'Private/Rental Boat',
width: 105,
dataIndex: 'privateRentalBoat'
}],
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
width : 624,
height : 325
});

function handleActivate(tab){ alert("in handle ");

pressureGridStore.proxy.url='siteUtil.jsp';

pressureGridStore.load({params:
{'method':'getSitePressureInfo'}
});
}

tabPanelObject = {
getTabPanel: function(siteId) {

var infoPanel = new Ext.tab.Panel({
id: 'tabPan',
xtype: 'tabpanel',
title: 'Site Information',
height: 1000,
width: '50.4%',
items:[
{
title: 'Pressure',
id: 'pressureTab',
listeners: {activate: handleActivate},
items:[

{
xtype: "panel",
width : '100%',
height : 300,
layout: 'fit',
items: [
pressureGrid
] }
]}
]
});

return infoPanel;
}
}
});


Json Response is as follow



{"pressureResultLength":"96","pressureFi":[{"charterBoat":9,"timePeriod":"0200-0800","KOD":"WEEKDAY","beachBank":9,"month":"JAN","privateRentalBoat":9,"manMade":9},{"charterBoat":0,"timePeriod":"0800-1400","KOD":"WEEKDAY","beachBank":9,"month":"JAN","privateRentalBoat":9,"manMade":9},{"charterBoat":0,"timePeriod":"1400-2000","KOD":"WEEKDAY","beachBank":9,"month":"JAN","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"2000-0200","KOD":"WEEKDAY","beachBank":9,"month":"JAN","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"0200-0800","KOD":"WEEKEND","beachBank":9,"month":"JAN","privateRentalBoat":9,"manMade":9},{"charterBoat":0,"timePeriod":"0800-1400","KOD":"WEEKEND","beachBank":9,"month":"JAN","privateRentalBoat":9,"manMade":9},{"charterBoat":0,"timePeriod":"1400-2000","KOD":"WEEKEND","beachBank":9,"month":"JAN","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"2000-0200","KOD":"WEEKEND","beachBank":9,"month":"JAN","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"0200-0800","KOD":"WEEKDAY","beachBank":9,"month":"FEB","privateRentalBoat":9,"manMade":9},{"charterBoat":0,"timePeriod":"0800-1400","KOD":"WEEKDAY","beachBank":9,"month":"FEB","privateRentalBoat":9,"manMade":9},{"charterBoat":0,"timePeriod":"1400-2000","KOD":"WEEKDAY","beachBank":9,"month":"FEB","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"2000-0200","KOD":"WEEKDAY","beachBank":9,"month":"FEB","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"0200-0800","KOD":"WEEKEND","beachBank":9,"month":"FEB","privateRentalBoat":9,"manMade":9},{"charterBoat":0,"timePeriod":"0800-1400","KOD":"WEEKEND","beachBank":9,"month":"FEB","privateRentalBoat":9,"manMade":9},{"charterBoat":0,"timePeriod":"1400-2000","KOD":"WEEKEND","beachBank":9,"month":"FEB","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"2000-0200","KOD":"WEEKEND","beachBank":9,"month":"FEB","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"0200-0800","KOD":"WEEKDAY","beachBank":9,"month":"MAR","privateRentalBoat":9,"manMade":9},{"charterBoat":1,"timePeriod":"0800-1400","KOD":"WEEKDAY","beachBank":9,"month":"MAR","privateRentalBoat":9,"manMade":9},{"charterBoat":1,"timePeriod":"1400-2000","KOD":"WEEKDAY","beachBank":9,"month":"MAR","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"2000-0200","KOD":"WEEKDAY","beachBank":9,"month":"MAR","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"0200-0800","KOD":"WEEKEND","beachBank":9,"month":"MAR","privateRentalBoat":9,"manMade":9},{"charterBoat":1,"timePeriod":"0800-1400","KOD":"WEEKEND","beachBank":9,"month":"MAR","privateRentalBoat":9,"manMade":9},{"charterBoat":1,"timePeriod":"1400-2000","KOD":"WEEKEND","beachBank":9,"month":"MAR","privateRentalBoat":9,"manMade":9}]}

Sorry for posting it in Ext 1.0 forum too.


-Ankit

Ankit.Desai
20 Sep 2011, 12:32 PM
I checked the FireBug Console. It returns the response as above but it is of type 'GET'


GET http://127.0.0.1:7101/Site_Register-siteregister-context-root/html/siteUtil.jsp?_dc=1316550610717&method=getSitePressureInfo&page=1&start=0&limit=25

is that the reason ?

-Ankit

Ankit.Desai
20 Sep 2011, 1:43 PM
When I did


pressureGridStore.on({
'load':{
fn: function(store, records, options){
//store is loaded, now you can work with it's records, etc.

console.info('store load, arguments:', arguments);
console.info('Store count = ', store.getCount());
},
scope:this
}
});


I got Store Count = 1.

-Ankit

Ankit.Desai
21 Sep 2011, 5:58 AM
Any one ?! Just a hint ! ;)

-Ankit

kyousuke
21 Sep 2011, 11:04 PM
var proxy=new Ext.data.HttpProxy( {url:'',method: 'POST'} );
I think this is the reason. Try to use the other proxy.

mankz
22 Sep 2011, 12:35 AM
Your 'reader' should be defined on your proxy, not on the store level.

Ankit.Desai
29 Sep 2011, 9:26 AM
Thanks for reply kyousuke and mankz.

Instead of using Ext.data.HttpProxy send forwarding call to specific URL I right down Ajax call in to same file that way I avoid going through another page and it works.

var paramJsonStr = "jsonObj=" + JSON.encodedStringify(param);


xmlHttp.open("POST",jsonUrl,false);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", paramJsonStr.length);
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.send(paramJsonStr);

var obj = eval('(' + xmlHttp.responseText + ')');

var mapResults = obj.mapResults;

Yes there is a jsonUrl but it was there in previous code too so I had 3 page flow (I was trying to separate UI, Ajax, DB-JDBC). No I removed that separate ajax call and embed it in UI.

Thanks again. Sorry for late reply
-Ankit