用php实现简单的Extjs gridpanel
任何人都可以给出extjs Editorgridpanel从php获取数据的工作示例， 我找到了一些例子，但它们对我不起作用 我试过了，这个，怎么了 我的html用php实现简单的Extjs gridpanel,php,extjs,Php,Extjs,任何人都可以给出extjs Editorgridpanel从php获取数据的工作示例， 我找到了一些例子，但它们对我不起作用 我试过了，这个，怎么了 我的html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>JSON Grid Example</title> <link rel="
<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>
<?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);
?>
假设我们有来自您的php的输出
JSON数据示例：
{
"data": [
{
"Employee_ID": 1,
"Department_ID": 1,
"Name": "Abhishek Jaiswal",
"Email": "ajaiswal@mail.com"
},
{
"Employee_ID": 2,
"Department_ID": 1,
"Name": "John Doe",
"Email": "jdoe@mail.com"
},
{
"Employee_ID": 3,
"Department_ID": 2,
"Name": "Darick Pascua",
"Email": "dpascua@mail.com"
}
]
}
要生成该示例JSON数据，请使用以下代码段：
records.php
$employeeRecords["data"] = array(
array(
"Employee_ID" => 1,
"Department_ID" => 1,
"Name" => "Abhishek Jaiswal",
"Email" => "ajaiswal@mail.com"
),
array(
"Employee_ID" => 2,
"Department_ID" => 1,
"Name" => "John Doe",
"Email" => "jdoe@mail.com"
),
array(
"Employee_ID" => 3,
"Department_ID" => 2,
"Name" => "Darick Pascua",
"Email" => "dpascua@mail.com"
),
);
echo json_encode($employeeRecords);
您的HTML，使用sencha的cdn：
<!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>
这是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', 'bagio@gmail.com'),
(2, 2, 'Sinchan', 'sinchan@gmail.com');
这是PHP文件（Employee.PHP）：
这是HTML文件：
<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>
JSON网格示例
Ext.onReady（函数（）{
var mystore=new Ext.data.Store（{proxy:new Ext.data.HttpProxy（{url:'Employee.php'}），
阅读器：新的Ext.data.JsonReader({
根：'雇员'，
字段：[{name:'Employee_ID'}，
{name:'Department_ID'}，
{name:'name'}，
{name:'Email'}]
})
});
//创建网格
var grid=新建Ext.grid.GridPanel({
商店：mystore，
标题：“MyGrid”，
栏目：[{
id:“员工id”，
标题：“员工ID”，
宽度：200，
可排序：是的，
dataIndex:'员工ID'
},
{
id:“部门id”，
标题：“部门ID”，
宽度：200，
可排序：是的，
数据索引：“部门ID”
},
{
标题：“名称”，
宽度：200，
可排序：是的，
数据索引：“名称”
},
{
标题：“电子邮件”，
宽度：200，
可排序：是的，
数据索引：“电子邮件”
}],
renderTo:“示例网格”，
宽度：540，
身高：200，
自动高度：真
});
load（）；
});
试试看。发生此错误是因为存在许多未关闭的阵列。
MySQL Select查询会给出不推荐的错误，因此如果您将apache warning设置为ON，网格将不会呈现，因为它包含来自不推荐的MySQL错误的其他警告html。
使用MySQLI而不是不推荐使用的mysql。将代码格式化得很好，没有人想读凌乱的代码为什么要放这段代码$query=“选择员工ID、部门ID、姓名、来自员工的电子邮件”；您的阵列未关闭。。更改为：$myInventory[]=array（'Employee_ID'=>$row['Employee_ID']，'Department_ID'=>$row['Department_ID']，'Name'=>$row['Name']，'Email'=>$row['Email']）；
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', 'bagio@gmail.com'),
(2, 2, 'Sinchan', 'sinchan@gmail.com');
<?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);
?>
<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>