1建立数据表
Java代码
- 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
Java代码
- <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关联.关键所在
Java代码
- 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}
- ]
- })
- });
4后台查询从数据库取数据
Getdata.php代码
- <?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文件
