1建立資料表
create table `login` (
`id` int(11) not null,
`name` varchar(20) not null,
`password` varchar(20) not null,
primary key (`id`)
) engine=innodb default charset=utf8;
insert into login values
('1','hong','1234'),
('2','linxiang','1234'),
('3','chen','99a9s'),
('4','luxi','aabe2');
2建立jsonreader.html視圖檔案，jsonreader.html調用json.js
<html>
<head>
<title>注冊</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext/ext-all.js"></script>
<script type="text/javascript" src="json.js"></script>
</head>
<body>
<div id='grid'></div>
</body>
</html>
3json.js 建構extjs的界面，将界面與前台視圖關聯(id=grid) 動态資料與背景getdata.php關聯.關鍵所在
ext.onready(function() {
store=new ext.data.jsonstore({
url:'getdata.php',
data:[],
fields:[
{name:'id'},
{name:'name'},
{name:'password'}
]
});
store.load();
new ext.grid.gridpanel({
store:store,
mode:'remote',
title:'簡單grid表格示例',
applyto:'grid',
width:250,
height:150,
frame:true,
columns:[
{header:"id",width:50,dataindex:'id',sortable:true},
{header:"姓名",width:80,dataindex:'name',sortable:true},
{header:"年齡",width:80,dataindex:'password',sortable:true}
]
})
});
<?php
$conn = mysql_connect("localhost", "root", "*****");
mysql_select_db("test");
$sql = "select id,name,password from login";
$result = mysql_query($sql, $conn);
while ($row = mysql_fetch_array($result)) {
$arr4[] = $row;
}
echo json_encode($arr4);
?>
5運作http://localhost/jsonreader.html
關于引用ext的js,css報錯問題unknown: failed opening required '/var/www/html/deploy/js.php'
删除ext目錄下面的.htaccess檔案