Abhishek Jaiswal
Reputation: 2684
simple Extjs gridpanel implementation with php
Can any give working example of extjs Editorgridpanel with fetching data from php , i found some example but they didnt work for me
i tried , this, what wrong
my 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>
my 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 php code
<?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);
?>
Upvotes: 3
Views: 4855
Answers (2)
Khaneddy2013
Reputation: 1321
This is The SQL :
CREATE TABLE IF NOT EXISTS `employees` (
`Employee_ID` int(11) NOT NULL,
`Department_ID` int(11) NOT NULL,
`Name` varchar(50) NOT NULL,
`Email` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `employees` (`Employee_ID`, `Department_ID`, `Name`, `Email`) VALUES
(1, 2, 'Bagio', '[email protected]'),
(2, 2, 'Sinchan', '[email protected]');
This is The PHP File (Employee.php):
<?php
// Make a MySQL Connection
$mysqli = new mysqli("localhost", "root", "", "extjs-test");
if (mysqli_connect_errno()) {
printf("Connection failed: %s\n", mysqli_connect_error());
exit();
}
// Retrieve all the data from the "employee" table
$SQL = "SELECT * FROM employees";
if (($result = $mysqli->query($SQL)) === false) {
printf("Invalid query: %s\nWhole query: %s\n", $mysqli->error, $SQL);
exit();
}
$counter = 0;
while ($obj = $result->fetch_object()) {
$myInventory["employees"][$counter] = array(
'Employee_ID' => $obj->Employee_ID,
'Department_ID' => $obj->Department_ID,
'Name' => $obj->Name,
'Email' => $obj->Email);
$counter++;
}
$myData = $myInventory;
echo json_encode($myData);
?>
This is The HTML File:
<html>
<head>
<title>JSON Grid Example</title>
<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/extjs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
var mystore = new Ext.data.Store({proxy: new Ext.data.HttpProxy({url: 'Employee.php'}),
reader: new Ext.data.JsonReader({
root: 'employees',
fields: [{name: 'Employee_ID'},
{name: 'Department_ID'},
{name: 'Name'},
{name: 'Email'}]
})
});
//create the grid
var grid = new Ext.grid.GridPanel({
store: mystore,
title: 'MyGrid',
columns: [{
id: 'Employee_ID',
header: 'Employee ID',
width: 200,
sortable: true,
dataIndex: 'Employee_ID'
},
{
id: 'Department_ID',
header: 'Department ID',
width: 200,
sortable: true,
dataIndex: 'Department_ID'
},
{
header: 'Name',
width: 200,
sortable: true,
dataIndex: 'Name'
},
{
header: 'Email',
width: 200,
sortable: true,
dataIndex: 'Email'
}],
renderTo: 'example-grid',
width: 540,
height: 200,
autoHeight: true
});
mystore.load();
});
</script>
</head>
<body>
<div id="example-grid"></div>
</body>
</html>
Try it. The error occurs because there are many unclosed array. And the MySQL Select Query give deprecated error, so if You set apache warning ON, the Grid would not rendered cause it contains additional warning html from deprecated mysql error. Use MySQLI instead of deprecated mysql.
Upvotes: 1
Potato Science
Reputation: 602
Assuming we have this output from your php
A Sample JSON Data:
{
"data": [
{
"Employee_ID": 1,
"Department_ID": 1,
"Name": "Abhishek Jaiswal",
"Email": "[email protected]"
},
{
"Employee_ID": 2,
"Department_ID": 1,
"Name": "John Doe",
"Email": "[email protected]"
},
{
"Employee_ID": 3,
"Department_ID": 2,
"Name": "Darick Pascua",
"Email": "[email protected]"
}
]
}
To generate that Sample JSON Data use this code snippet: records.php
$employeeRecords["data"] = array(
array(
"Employee_ID" => 1,
"Department_ID" => 1,
"Name" => "Abhishek Jaiswal",
"Email" => "[email protected]"
),
array(
"Employee_ID" => 2,
"Department_ID" => 1,
"Name" => "John Doe",
"Email" => "[email protected]"
),
array(
"Employee_ID" => 3,
"Department_ID" => 2,
"Name" => "Darick Pascua",
"Email" => "[email protected]"
),
);
echo json_encode($employeeRecords);
Your HTML, using cdn from sencha:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>http://stackoverflow.com/questions/17597001/simple-extjs-gridpanel-implementation-with-php</title>
<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all-debug.js"></script>
<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-theme-neptune.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-neptune/ext-theme-neptune-all.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
And finally your app.js, I've added comments for you:
/**
* Your store here
*/
var EmployeeRecords = Ext.create('Ext.data.Store', {
autoLoad : true, //Autoload set it to true unless you want to load this manually
fields:['Employee_ID', 'Department_ID', 'Name', 'Email'], //Set your model
proxy: {
type: 'ajax',
url : 'records.php', //Actual data coming from the database
reader: {
type: 'json', //The type of the reader
root: 'data' //We set our root here
}
}
});
Ext.application({
name: 'Simple Extjs Grid', //Application Name
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit', //We stretch our datagrid
items: [
{
xtype: 'gridpanel', //Our grid panel
title: 'JSON Sample Data',
store: EmployeeRecords,
columns: [
{
xtype: 'numbercolumn',
flex: 1,
dataIndex: 'Employee_ID',
header: 'Employee ID'
},
{
flex: 1,
dataIndex: 'Department_ID',
header: 'Department ID'
},
{
flex: 1,
dataIndex: 'Name',
header: 'Name'
},
{
flex: 1,
dataIndex: 'Email',
header: 'Email'
},
],
listeners: { //After render event listener
afterrender: function() {
alert("Datagrid FTW!");
}
}
}
]
});
}
});
Upvotes: 2
Related Questions
- ExtJS GridPanel Entire Row Click
- I'm trying to connect ExtJs to PHP with database and I'm having a trouble to show a data to the gridpanel
- Creating a Dynamic Grid with ExtJS
- ExtJS and simple grid panel
- Trying extjs5 simple gridpanel (example doesnt work)
- ExtJS Load Data on Ajax return (json) and load store for grid.panel
- Extjs Don't load Grid. PHP
- Grid Display in Ext Js
- ExtJS grid cell editing
- ExtJS 4 - Load grid from hyperlink