任何可以通过从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代码
<?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>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!");
}
}
}
]
});
}
});
标签：extjs,php 来源： https://codeday.me/bug/20191123/2064596.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。