View Full Version : Yet another "Data not showing in Grid" thread [SOLVED]

10 Jan 2008, 8:58 AM

Ok, I'm an *****. Apparently my problem was in the get_data.js file:

I had:

{name: 'pk_employee_id'} //columnmapping
,{name: 'name', mapping: 'full_name'} //columnmapping
,{name: 'phone', mapping: 'phone_oncall'} //columnmappingI should have had:

{name: 'pk_employee_id'} //columnmapping
,{name: 'full_name'} mapping: 'full_name'} //columnmapping
,{name: 'phone_oncall', mapping: 'phone_oncall'} //columnmappingBasically, I didn't read the documentation correctly and mis-understood that the "name" part was the name of the field in your DB. I-|

Hi all. I'm having a problem that I have searched and searched about and gotten stuck on. Basically, I have a setup that I copied from an example to try and get to work with my setup. In any case, as far as I can get is a grid with no data.

I'm using PHP (4.x with JSON installed) and Ext 1.x. The PHP part looks to be working correctly, but I can't seem to parse the JSON data into the grid. I'm sure it's just something I'm missing.

I'm new to Extjs, but I have plenty of experience with javascript, PHP, and MySQL. Anyways, here is my code:



//make database connection
mysql_connect("***********", "****", "*****") or
die("Could not connect: " . mysql_error());

if(isset($_GET['ac']) && $_GET['ac']=='showData')
elseif(isset($_GET['ac']) && $_GET['ac']=='saveData')
saveData($_GET['field'], $_GET['row'], $_GET['value']);

function showData()
//query with data
$result = mysql_query("SELECT pk_employee_id, full_name, phone_oncall from tbl_employee");
$rows = mysql_num_rows($result);

//while($rec = mysql_fetch_array($result))

while($rec = mysql_fetch_assoc($result))
$arr[] = $rec;

echo $_GET['callback'].'({total:'.$rows.',results:'.json_encode($arr).'})';


function saveData($field, $row, $value)
* field: the dataIndex which is being updated
* $row: the row that is being updated
* $value: the new value

//look which record is being updated
$result = mysql_query("SELECT pk_employee_id from tbl_employee");

while($rec = mysql_fetch_assoc($result))
$id[] = $rec['pk_employee_id'];

//NOTE: this isn't the best way to save your data!
//What I do is look in the database and put all the ID's in an array.
//Then I know that $row is the right array index.
//But when you change the order of the records for example, this isn't enough to know the row
//However, this example works :)

//save data to database
if($field=='full_name') //the field name is being updated
$result = mysql_query("UPDATE `tbl_employee` SET `full_name` = '$value' WHERE `id`='$id[$row]';");
?> get_data.js

var GridUI = function() {
//enable Quicktips

//set vars
var ds; //datastore for grid
var cm; //columnModel
var grid; //component
var fm = Ext.form, Ed = Ext.grid.GridEditor; // shorthand alias

//create the datastores
function setupDataSource() {
//create the Data Store for the grid
ds = new Ext.data.Store({
//set the http-proxy (link to the php document)
proxy: new Ext.data.HttpProxy({
url: 'get_data.php?ac=showData' //a function in your php-script must be activated when ac = showdata


//set up the JsonReader
reader: new Ext.data.JsonReader({
totalProperty: 'total',
root: 'results',
id: 'pk_employee_id'
{name: 'pk_employee_id'} //columnmapping
,{name: 'name', mapping: 'full_name'} //columnmapping
,{name: 'phone', mapping: 'phone_oncall'} //columnmapping

//load datastores

//create the columnmodel
function getColumnModel() {
cm = new Ext.grid.ColumnModel([{

header: "Name",
dataIndex: 'full_name',
width: 150,
editor: new Ed(new fm.TextField({
allowBlank: false,
maxLength: 150
header: "Phone",
dataIndex: 'phone_oncall',
width: 150


//set the default for sorting the columns
cm.defaultSortable = false;

return cm;

//create the grid
function buildGrid() {
//create the form
var gridForm = new Ext.form.Form({});

//create the grid
var grid = new Ext.grid.EditorGrid('editor-grid', {
ds: ds,
cm: getColumnModel(),
selModel: new Ext.grid.RowSelectionModel({singleSelect:true})

//set the layout for the grid
var layout = Ext.BorderLayout.create({
center: {
panels: [new Ext.GridPanel(grid)]
}, 'grid-panel');

//render the grid

//set the header
var gridHead = grid.getView().getHeaderPanel(true);

var tb = new Ext.Toolbar(gridHead, [{}]);

//activate function updateDB when a cell is edited
grid.on('afteredit', updateDB);

function updateDB(oGrid_event){
//waitMsg: 'Saving changes, please wait...',
url:'get_data.php?ac=saveData&field='+oGrid_event.field+'&row='+oGrid_event.row+'&value='+oGrid_event.value, //php function that saves the data
success:function(form, action) {
alert('Congrats! Your changes were saved!!!!');
failure: function(form, action) {
alert('Oops the delete did not work out too well!');

//render form

return {
//the init
init : function() {

getDataSource: function() {
return ds;

Ext.onReady(GridUI.init, GridUI, true); get_data.htm

<title>Sample of a grid</title>
<script language="JavaScript" type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<!---<script language="JavaScript" type="text/javascript" src="lib/ext/ext-all.js"></script>--->
<script language="JavaScript" type="text/javascript" src="lib/ext/ext-all-debug.js"></script>
<script language="JavaScript" type="text/javascript" src="get_data.js"></script>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" media="screen" />

<div id="grid-panel" style="width:800px;height:668px">
<div id="editor-grid"></div>

<div id="editGrid">


</html> Here's the output from get_data.php

({total:166,results:[{"pk_employee_id":"3","full_name":"blah blah","phone_oncall":"555-555-5555"},{"pk_employee_id":"4","full_name":"bah blaha","phone_oncall":"555-555-5555"}]})
Any ideas? Is my JSON output correct?

I would greatly appreciate any help you guys give me. Once I get this stuff down, I will return the favor to any after me. :)