任何可以通过从PHP获取数据的extjs Editorgridpanel的工作示例,
我找到了一些例子,但他们没有为我工作
我试过了,这是什么错
我的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>
我的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
});
});
<?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);
?>
解决方法:
样本JSON数据：
{
"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": "dpascua@mail.com"
}
]
}
要生成该示例JSON数据,请使用以下代码片段：
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" => "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>https://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>
最后是您的app.js,我为您添加了注释：
/**
* 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!");
}
}
}
]
});
}
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
