PDA

View Full Version : No data showing up in grid.. using json store..



Zanderfax
26 Apr 2011, 2:58 PM
Need some help. I am using version 3.3 of extjs and having an issue with getting a grid to load...

Using the following code:


<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css" />
<script src="../lib/ext/adapter/ext/ext-base.js"></script>
<script src="../lib/ext/ext-all-debug.js"></script>
<script>

Ext.BLANK_IMAGE_URL = '../lib/ext/resources/images/default/s.gif';

var song = new Ext.data.Record.create([
{name: 'title',type:'string'},
{name: 'artist',type:'string'}
]);

var songList = new Ext.data.Store ({
url: 'http://localhost/radio/get_songlist.php',
reader: new Ext.data.JsonReader({
root: 'songlist',
idProperty: 'title'
}, song ),
autoLoad: true
});

Ext.onReady(function(){

var songGrid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
frame: true,
title: 'Songs',
autoHeight: true,
store: songList,
colModel: new Ext.grid.ColumnModel ({
defaultSortable: true,
columms: [
{name: 'artist', header: "Artist", dataIndex: 'artist'},
{name: 'title', header: "Title", dataIndex: 'title'},
]
})
});
});
</script>
</head>
<body>
<!-- Nothing in the body -->
</body>
</html>

and with the following data being seen in the store and page:


{songlist:[{"title":"Momma Mia","artist":"ABBA"},{"title":"Bang-A-Boomerang","artist":"ABBA"},{"title":"Dancing Queen","artist":"ABBA"},{"title":"Eagle","artist":"ABBA"},{"title":"Gimme! Gimme! Gimme! (A Man After Midnight)","artist":"ABBA"},{"title":"I Have A Dream","artist":"ABBA"},{"title":"Knowing Me, Knowing You","artist":"ABBA"},{"title":"One Of Us","artist":"ABBA"},{"title":"SOS","artist":"ABBA"},{"title":"Super Trooper","artist":"ABBA"},{"title":"Super Trouper","artist":"ABBA"},{"title":"The Name Of The Game","artist":"ABBA"},{"title":"Voulez-Vous","artist":"ABBA"},{"title":"Gimme Gimme Gimme ( A man after midnight )","artist":"ABBA"},{"title":"Does your mother know","artist":"Abba"},{"title":"Fernando","artist":"ABBA"},{"title":"The winner takes it all","artist":"Abba"}]}

and with no errors in Firebug.. I get a blank box with a title Songs and nothing in it. Looking at the HTML output, there are 16 divs with no data in them in the box where the songs should be.

What am I missing??

Any help would me most appreciated,

Z

friend
27 Apr 2011, 9:59 AM
As an experiment, try this refactor and see if it works:



var songList = new Ext.data.JsonStore ({
autoLoad: true,
fields: ['title', 'artist'],
url: 'http://localhost/radio/get_songlist.php',
idProperty: 'title'
});

var songGrid = new Ext.grid.GridPanel({
autoHeight: true,
frame: true,
renderTo: Ext.getBody(),
title: 'Songs',
store: songList,
columns: [
{header: "Artist", dataIndex: 'artist'},
{header: "Title", dataIndex: 'title'}
]
})



Also note that you have an extra/trailing comma after the last grid column in your code sample...

Zanderfax
27 Apr 2011, 12:36 PM
As an experiment, try this refactor and see if it works:



var songList = new Ext.data.JsonStore ({
autoLoad: true,
fields: ['title', 'artist'],
url: 'http://localhost/radio/get_songlist.php',
idProperty: 'title'
});

var songGrid = new Ext.grid.GridPanel({
autoHeight: true,
frame: true,
renderTo: Ext.getBody(),
title: 'Songs',
store: songList,
columns: [
{header: "Artist", dataIndex: 'artist'},
{header: "Title", dataIndex: 'title'}
]
})



Also note that you have an extra/trailing comma after the last grid column in your code sample...


With this code, I get just the two columns named in the box and no data...

fay
27 Apr 2011, 2:40 PM
Did you remember to include the root?



var songList = new Ext.data.JsonStore ({
autoLoad: true,
root: 'songlist', // <-- Don't forget
fields: ['title', 'artist'],
url: 'http://localhost/radio/get_songlist.php',
idProperty: 'title'
});

var songGrid = new Ext.grid.GridPanel({
autoHeight: true,
frame: true,
renderTo: Ext.getBody(),
title: 'Songs',
store: songList,
columns: [
{header: "Artist", dataIndex: 'artist'},
{header: "Title", dataIndex: 'title'}
]
});



Additionally, in your original code, you can some stuff outside of the onReady... put everything inside it!