PDA

View Full Version : json grid question



teddy11
15 May 2012, 1:43 PM
I have over 2000 items in json format like the one below (filename: Data.json)

{"year":1,"em":5501,"er":9,"ct":9,"ke":21,"month1":1,"leapyear:1375,"me":1,"melength":0,"days":2008875,"em1":3}

No matter what I do with the store proxy(ajax,memory.....) I can not display the grid. I keep getting all kinds of errors and the only thing I can think of that is wrong is the way I am declaring the data store.
What am i doing wrong?
Is it not possible to do a json grid and test on your computer? Does the json data have to be on a server?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="/ext-4.0.7/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext-4.0.7/ext-all.js"></script>
<script type="text/javascript" src="/ext-4.0.7/examples/ux/PreviewPlugin.js"></script>
<script type="text/javascript" src="/ext-4.0.7/examples/ux/SlidingPager.js"></script>
<script type="text/javascript" src="/ext-4.0.7/examples/ux/data/PagingMemoryProxy.js"></script>
<script type="text/javascript" src="js/Data.json"></script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript">
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.util.*',
'Ext.ux.data.PagingMemoryProxy',
'Ext.toolbar.Paging',
'Ext.ux.SlidingPager'
]);
Ext.onReady(function(){

// register model
Ext.define('Calendar', {
extend: 'Ext.data.Model',
idProperty: 'calendar',
fields: [
{name: 'year', type: 'int'},
{name: 'em', type: 'int'},
{name: 'er', type: 'int'},
{name: 'ct', type: 'int'},
{name: 'ke', type: 'int'},
{name: 'month1', type: 'int'},
{name: 'leapyear', type: 'int'},
{name: 'me', type: 'int'},
{name: 'melength', type: 'int'},
{name: 'days', type: 'int'},
{name: 'em1', type: 'int'}
]
});
// create the data store
var store = Ext.create('Ext.data.Store', {
model: 'Calendar',
proxy: {
type:'memory',
url: 'js/Data.json'
//data: myData,
//type: 'ajax',

//reader: {
//type: 'array',
// type: 'json',
// root: 'users'
}
});
// create the Grid
var grid = Ext.createWidget('gridpanel', {
store: store,
columns: [{
id:'year',
text: 'Year',
sortable: true,
dataIndex: 'year',
flex: 1,
width: 57
},{
text: 'em ',
sortable: true,
dataIndex: 'em',
width: 67
},{
text: 'er',
sortable: true,
dataIndex: 'er',
width: 48,

},{
text: 'ct',
sortable: true,
dataIndex: 'ct',
width: 75
},{
text: 'ke',
sortable: true,
dataIndex: 'ke',
width: 75
},{
text: 'Month 1',
sortable: true,
dataIndex: 'Month1',
width: 75

jay@moduscreate.com
15 May 2012, 4:33 PM
change your proxy type to type:'ajax'

teddy11
16 May 2012, 6:21 AM
ajax gives me this error...
Access is denied (ext-all.js, line 15 character 204788 (http://www.sencha.com/forum/0))
any ideas??
Is my json correct?

jay@moduscreate.com
16 May 2012, 8:03 AM
Sounds like a same origin policy issue. Are you viewing the page through http or file://?

teddy11
16 May 2012, 9:06 AM
it is on my computer ( file://).
so if I have to move this to the server to test? Both the json file and the html have to be on the same domain, correct. Same domain , different folders is OK.
I am just trying to understand this domain business is really the root of the problem.

mitchellsimoens
17 May 2012, 7:15 AM
You should try to test your app in something that is close to what production is. In this case I would always run a web app on a web server.

teddy11
18 May 2012, 11:03 AM
Like suggested, I have moved the code to the website and as you can see it doesnot populate the data. Instead i get one row of zero's.
http://www.myethiopia.org/QuickLinks/Calendar/May2012/calendardetails.html
1. How do I view/debug in IE developer(F12 develeopers tools) the contents of the grid -columns(Year, AmatAlem......) to see what is getting added to the grid? can't figure that out.....
2.Why is not all the data from movfestData.json getting populated to the grid?
3. Is my store declared correctly?
4. Is movfestData.json in the correct format?
Thanks.

vietits
18 May 2012, 5:55 PM
Try to fix your code of creating store like below


var store = Ext.create('Ext.data.Store', {
model: 'Calendar',
proxy: {
type:'ajax',
url: 'js/movfestData.json',
reader: {
type: 'json',
root: 'users'
}
}
});

teddy11
18 May 2012, 8:56 PM
Thank You Vieitis. That worked.

However, I am unable to limit the pagesize. What am I missing here?
JSON---{"success":true,"totalCount":20,"users":..........


var store = Ext.create('Ext.data.Store', {
model: 'Calendar',
pageSize: 20,
proxy: {
type:'ajax',
url: 'js/movfestData.json',
totalProperty: 'totalCount',
reader: {
type: 'json',
root: 'users'
}
}
});

vietits
19 May 2012, 1:33 AM
1. Set pageSize of store to what you want.
2. Write your server side script to return only pageSize records or less. The client script will receive all data returned by the server regardless it is more than pageSize records or not.