PDA

View Full Version : Extjs json and php



rbjanaki
13 Sep 2011, 3:21 PM
I have a simple data in mysql and want to populate that data in a Extjs grid

My code

extjson-grid.html



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>JSON Grid Example</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="examples/grid/grid-examples.css" />
<script type="text/javascript" src="extjson-grid.js"></script>
<h1>JSON Grid Example</h1>
<p>This example shows how to load a grid with JSON data.</p>
<div id="example-grid"></div>
</head>
</html>


connectextjs.php


<?
// Make a MySQL Connection
mysql_connect("localhost", "root", "password") or die(mysql_error());
mysql_select_db("test") or die(mysql_error());
// Retrieve all the data from the "employee" table
$result = mysql_query("SELECT * FROM employees") or die(mysql_error());
$row = mysql_fetch_assoc($result);
// get data and store in a json array
$query ="Select Employee_ID,Department_ID,Name,Email from Employees";
while ($row = mysql_fetch_array($result, MYSQL_ASSOC))
{ $myInventory[] = array(
'Employee_ID' => $row['Employee_ID'],
'Department_ID' => $row['Department_ID'],
'Name' => $row['Name'],
'Email' => $row['Email'] ; }

$myData = $myInventory;
echo json_encode($myData);
?>

extjson-grid.js




Ext.onReady(function()
{
var proxy=new Ext.data.HttpProxy( {url:'connectextjs.php'});
var reader=new Ext.data.JsonReader(
[ {name: 'Employee_ID', mapping: 'Employee_ID'},
{name: 'Department_ID'},
{name: 'Name'},
{name: 'Email'},
]

var store = new Ext.data.Store( { proxy:proxy, reader:reader });

store.load();

// create the grid var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Employee_ID", width: 90, dataIndex: 'Employee_ID', sortable: true},
{header: "Department_ID", width: 90, dataIndex: 'Department_ID', sortable: true},
{header: "Name", width: 90, dataIndex: 'Name', sortable: true},
{header: "Email", width: 200, dataIndex: 'Email', sortable: true}, ],
renderTo:'example-grid',
width:540, height:200
});

});


My problem is I can't load the data on the grid. Please help me I am new to Extjs

Thanks

mankz
18 Sep 2011, 11:36 AM
Is this Ext 4 or 3? What does your server respond? Open the response in Firebug and paste it here. You also have extra commas that will break IE.



var proxy=new Ext.data.HttpProxy( {url:'connectextjs.php'});
var reader=new Ext.data.JsonReader(
[
{name: 'Employee_ID', mapping: 'Employee_ID'},
{name: 'Department_ID'},
{name: 'Name'},
{name: 'Email'}, // <---- REMOVE this comma
]

rbjanaki
19 Sep 2011, 4:46 AM
Hi mankz,

Thanks for your reply and suggestions. Now I could load data on Google Chrome, but it is not showing any data on FireFox or IE.

mankz
19 Sep 2011, 4:47 AM
What does your server respond? Open the response in Firebug and paste it here. See above :)