PDA

View Full Version : grid doesnt populate from database



RagingPixels
16 Feb 2013, 9:44 AM
Hello Guys,
ive been working on a simple application to show a grid filled with data from a database, but it always shows up empty and i cant find the error.
Hopefully you can help me


index.html

<html><head>
<title>Grid Sample</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="mainscript.js"></script>
</head>


<body></body>
</html>


mainscript.js

Ext.onReady(function() {Ext.define(
'results',
{
extend: 'Ext.data.Model',
fields: ['id', 'jahr', 'interpret', 'titel']
});


var store = Ext.create('Ext.data.Store',
{
model: 'results',
proxy: {
type: 'ajax',
url : 'json.php',
reader: {
type: 'json',
root: 'data',
model: 'results'
}
},
autoLoad: true
});


var grid = Ext.create('Ext.grid.Panel',
{
store: store,
columns:
[
{id:'id',header: 'id', width: 30, sortable: true, dataIndex: 'id'},
{header: 'jahr', width: 100, dataIndex: 'jahr'},
{header: 'interpret', width: 250, dataIndex: 'interpret'},
{header: 'titel', width: 250, dataIndex: 'titel'}
],
stripeRows: true,
height:180,
width:500,
renderTo: 'grid-example',
title:'grid example'
});


});


json.php

<html> <head>
</head>
<body>
<?php
$conn = mysql_connect('localhost','admin','1234');
$result = mysql_query("SELECT * FROM cdcol.cds");
$data = array();
while($row = mysql_fetch_array($result))
{
$data[] = $row;
}
$jsonresult = json_encode($data);

echo $jsonresult;
?>
</body>
</html>

vicvolk
16 Feb 2013, 11:04 AM
If you look at what FireFox says I guess you will see something like 'getRange bla-bla-bla'. Probably these receipts will help: 1) instead of 'Ext.data.Store' use 'Ext.data.JsonStore' (I always do like this and it works) 2) specify in your store 'pageSize' parameter - just below 'autoload:true' write pageSize:100 3) within proxy brackets write 'actionMethods: {read: 'POST'}'. Within reader brackets write totalProperty:'total'. On the whole the store may look like this:



var store = Ext.create('Ext.data.JsonStore', {
autoLoad:true,
model:'mymodel',
pageSize:100,
proxy:{
type: 'ajax',
url: 'json.php',
actionMethods: {
read: 'POST'
},
reader: {
type:'json',
root:'items',
totalProperty:'total'
}
}
})



And make sure, that json comes back correctly. In this very example I get something like




{"total":"100","items":[{"id":"457","text":"text 1"},{"id":"460","text":"text 2"}................

RagingPixels
16 Feb 2013, 11:32 AM
First of all : thank you for your reply
I changed the jason.php to


<html> <head>
</head>
<body>
<?php
$conn = mysql_connect('localhost','admin','1234');
$result = mysql_query("SELECT * FROM cdcol.cds");
$data = array();
while($row = mysql_fetch_array($result))
{
$cds[] = array('titel' => $row['titel'], 'jahr' => $row['jahr'],'interpret' => $row['interpret'], 'id' => $row['id']);
}
$jsonresult = json_encode(array('cds'=>$cds));
echo $jsonresult;
?>
</body>
</html>

and applied all your suggested changes
and now i get this Json Object with a small test table:

{"cds":[{"titel":"Beauty","jahr":"1990","interpret":"Ryuichi Sakamoto","id":"1"},{"titel":"Goodbye Country (Hello Nightclub)","jahr":"2001","interpret":"Groove Armada","id":"4"},{"titel":"Glee","jahr":"1997","interpret":"Bran Van 3000","id":"5"}]}

I think this should be correct, but even after your changes the grid is still empty.

vicvolk
16 Feb 2013, 11:38 AM
Now you have 'cds' as a root. Make sure that in reader brackets you have root:'cds' and I still do not see totalProperty. In my way on the server side I would have something like $o = array('total'=>'100','cds'=>$obj); echo php_json_encode($o). Just play with it and you will make it work.

RagingPixels
16 Feb 2013, 11:54 AM
oh yeah. i added the totalproperty:total in my .js but forgot to add the total in the .php.
i also changed the root from data to cds.
now the jsonobject looks like this

{"total":"100","cds":[{"titel":"Beauty","jahr":"1990","interpret":"Ryuichi Sakamoto","id":"1"},{"titel":"Goodbye Country (Hello Nightclub)","jahr":"2001","interpret":"Groove Armada","id":"4"},{"titel":"Glee","jahr":"1997","interpret":"Bran Van 3000","id":"5"}]}

but theres still nothing in the grid...

here the updated mainscript.js

Ext.onReady(function() {Ext.define(
'results',
{
extend: 'Ext.data.Model',
fields: ['id', 'jahr', 'interpret', 'titel']
});


var store = Ext.create('Ext.data.JsonStore',
{
model: 'results',
proxy: {
type: 'ajax',
url : 'json.php',
actionMethods:{read:'POST'},
reader: {
type: 'json',
root: 'cds',
model: 'results',
totalProperty:'total'
}
},
autoLoad:true ,
pageSize:100
});


var grid = Ext.create('Ext.grid.Panel',
{
store: store,
columns:
[
{id:'id',header: 'id', width: 30, sortable: true, dataIndex: 'id'},
{header: 'jahr', width: 100, dataIndex: 'jahr'},
{header: 'interpret', width: 250, dataIndex: 'interpret'},
{header: 'titel', width: 250, dataIndex: 'titel'}
],
stripeRows: true,
height:180,
width:500,
renderTo: 'grid-example',
title:'grid example'
});


});

vicvolk
16 Feb 2013, 12:13 PM
This is a working example. I tested it against your json.




Ext.onReady(function(){
Ext.define('mymodel', {
extend:'Ext.data.Model',
fields:[
{name:'titel'},{name:'jahr'},{name:'interpret'},{name:'id'}
],
idProperty:'id'
})
var store = Ext.create('Ext.data.JsonStore', {
autoLoad:true,
model:'mymodel',
pageSize:100,
proxy:{
type:'ajax',
url:'json.php',
actionMethods: {
read: 'POST'
},
reader: {
type:'json',
root:'cds',
totalProperty:'total'
}
}
})
var grid = Ext.create('Ext.grid.Panel', {
store:store,
border:0,
layout:'fit',
columns:[
{
text:'&nbsp;',
flex:1,
sortable:false,
dataIndex:'titel'
}
],
renderTo:'example'
})
})


This is what I got:

41896

RagingPixels
16 Feb 2013, 12:26 PM
Ok thank you so much again for the time youre spenfing on this.
But now it is getting really strange.
I literally just copypasted your code(obviously had to change the renderTo:example to grid-example)
but all i get is one empty titlebar and no elements.

vicvolk
16 Feb 2013, 12:40 PM
Hmm... I did everything I could to help you. My advice is to trace errors. "Cntrl-Shift-K" in Firefox and look what is going on.