PDA

View Full Version : JSON Reader and GridPanel



mpbjr30
27 Dec 2009, 8:24 PM
Hi Everyone,

I'm trying to use the datagrid along with PHP for the first time. I've been playing around with this for a couple of days looking at a bunch of examples on the forums, but still seem to be having some trouble getting my data to display in the grid. Basically I get the grid, but no data. I'm trying to keep it simple. I have a gridpanel, store, jsonreader and a columnmodel. I don't think there is anything wrong with the PHP. I've debugged the code and the data is pulled from the database and the data is encoded into format using the 'json_encode' function in PHP. Is there a way I can just hardcode my json data into my json reader? I was looking around for this too, but I couldn't find an example. I've posted my extjs and php below and what the debugger is showing as to what PHP creates for json data. I thinks it's just something simple that I'm doing wrong. Thanks in advance!

-Mike

**************** EXTJS CODE***********************

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/xtheme-2brave.css"/>

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">

var TeamsDataStore; // This will be our datastore
var TeamsColumnModel; // This will be aour column model
var TeamListingEditorGrid;
Ext.onReady(function(){

Ext.QuickTips.init();

TeamsDataStore = new Ext.data.Store({
storeId:'TeamDataStore',
proxy: new Ext.data.HttpProxy({url:'http://localhost:82/dao/proxy.php', method:'POST'}),
baseParams:{task:"TEAM_LISTING"},
reader: new Ext.data.JsonReader({totalProperty:'total', root:'rows', idProperty:'id'},
[
{name: 'id', type: 'string', mapping: 'id'},
{name: 'name', type: 'string', mapping: 'name'}
]
)


});



TeamsColumnModel = new Ext.grid.ColumnModel([
{id:'id', header: 'ID', dataIndex: 'id', width: 150, readOnly: true, hidden: false},
{header: 'Team Name', dataIndex: 'name', width: 150, readOnly: true, hidden: false}

]);

TeamListingEditorGrid = new Ext.grid.GridPanel({
id:'TeamListingEditorGrid',
store:TeamsDataStore,
cm:TeamsColumnModel,
renderTo:mygrid
});


TeamsDataStore.load();


});
</script>


<div id="mygrid"/>

**************** JSON DATA***********************

{"total":"29","rows":[{"id":"1","name":"Anaheim Mighty Ducks"},{"id":"2","name":"Atlanta Thrashers"},{"id":"3","name":"Buffalo Sabres"},{"id":"4","name":"Calgary Flames"},{"id":"5","name":"Carolina Hurricanes"},{"id":"6","name":"Chicago Blackhawks"},{"id":"7","name":"Colorado Avalanche"},{"id":"8","name":"Columbus Blue Jackets"},{"id":"9","name":"Dallas Stars"},{"id":"10","name":"Detroit Red Wings"},{"id":"11","name":"Edmonton Oilers"},{"id":"12","name":"Florida Panthers"},{"id":"13","name":"Los Angeles Kings"},{"id":"14","name":"Minnesota Wild"},{"id":"15","name":"Montreal Canadiens"},{"id":"16","name":"Nashville Predators"},{"id":"17","name":"New Jersey Devils"},{"id":"18","name":"New York Islanders"},{"id":"19","name":"New York Rangers"},{"id":"20","name":"Ottawa Senators"},{"id":"21","name":"Philadelphia Flyers"},{"id":"22","name":"Phoenix Coyotes"},{"id":"23","name":"Pittsburgh Penguins"},{"id":"24","name":"San Jose Sharks"},{"id":"25","name":"St. Louis Blues"},{"id":"26","name":"Tampa Bay Lightning"},{"id":"27","name":"Toronto Maple Leafs"},{"id":"28","name":"Vancouver Canucks"},{"id":"29","name":"Washington Capitals"}]}
**************** PHP CODE ***********************

<?php
require_once '../bo/TeamFinder.php' ;

$task = '';
if ( isset($_POST['task'])){
$task = $_POST['task']; // Get this from Ext
}

if ( isset($_GET['task'])){
$task = $_GET['task']; // Get this from Ext
}
echo($task);
switch($task){
case "TEAM_LISTING": // Give the entire list
$finder = new TeamFinder;
$teams = $finder->findAll() ;
$total_teams = count($teams);
$json_teams = '{"total":"' . $total_teams . '","rows":'.json_encode($teams).'}';
echo($json_teams);
break;
default:
echo "{failure:true}"; // Simple 1-dim JSON array to tell Ext the request failed.
break;
}

?>

Condor
27 Dec 2009, 11:50 PM
A GridPanel needs a height (specify height:<n> or autoHeight:true).

mpbjr30
28 Dec 2009, 2:39 PM
Tried adding the following but still no luck. Is there a way to debug or display what's retrieved from the store?

TeamListingEditorGrid = new Ext.grid.GridPanel({
id:'TeamListingEditorGrid',
autoHeight:true,
store:TeamsDataStore,
cm:TeamsColumnModel,
renderTo:mygrid
});

mjlecomte
28 Dec 2009, 8:34 PM
There's an example in my signature and there's a grid FAQ in my signature also that has debugging tips.

mpbjr30
28 Dec 2009, 8:45 PM
I switched to the JSONStore and got it to work. The new code is below. Thanks everybody for the help. It's much appreciated.


<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/xtheme-2brave.css"/>

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">

var TeamsDataStore; // This will be our datastore
var TeamsColumnModel; // This will be aour column model
var TeamListingEditorGrid;
Ext.onReady(function(){

Ext.QuickTips.init();



var ds = new Ext.data.JsonStore({
id: 'TeamDataStore',
totalProperty: 'total',
baseParams:{task:"TEAM_LISTING"},
proxy: new Ext.data.HttpProxy({ method: 'POST', url: "http://localhost:82/dao/proxy.php"}),
autoLoad:true,
method:'POST',
root: 'rows',
fields: [
{name:'id'},
{name:'name'}
],
sortInfo: {field: 'name', direction: 'ASC'},
remoteSort: true

});


var teamsColumnModel = new Ext.grid.ColumnModel([
{id:'id', header: 'ID', dataIndex: 'id', width: 150, readOnly: true, hidden: false},
{header: 'Team Name', dataIndex: 'name', width: 150, readOnly: true, hidden: false}

]);

TeamListingEditorGrid = new Ext.grid.GridPanel({
id:'TeamListingEditorGrid',
autoHeight:true,
store:ds,
cm:teamsColumnModel,
renderTo:mygrid
});


ds.load();


});
</script>


<div id="mygrid"/>