先利用get.php這個網頁取得資料庫裡的資料
get.php
<?php
$conn=mysql_connect("localhost","dbname","passwd");
mysql_select_db("dbname");
$sql="select id,name,password from
login";
$result=mysql_query($sql,$conn);
while($row=mysql_fetch_array($result))
{
$arr4[]=$row;
}
echo json_encode($arr4);
?>
之後再使用json.js到get.php這個頁面取得所需的欄位
json.js
Ext.onReady(function() {
store=new Ext.data.JsonStore({
url:'get.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}
]
})
});
再利用jsonreader.php給展現出來
jsonreader.php
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../ext-3.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.2.1/ext-all.js"></script>
<script type="text/javascript" src="json.js"></script>
</head>
<body>
<div id='grid'></div>
</body>
</html>