(十二) 表格分页及与服务器交互

最新推荐文章于 2024-10-26 10:24:16 发布

iteye_3898

最新推荐文章于 2024-10-26 10:24:16 发布

阅读量119

点赞数

分类专栏： AJAX 文章标签：应用服务器 EXT Ajax JSP JavaScript ViewUI

AJAX 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

(3) 表格分页
一次性将成千上万条数据显示在Grid里，然后拖动滚动条查看数据，显然不是什么好主意，在效率上也是不允许的。实际上，Grid控件对性能的要求较高。如果在一个页面上放3个Grid，就可以感觉到响应变慢。如果在每个Grid里显示上千条数据，效率就可想而知了。所以说分页是必不可少的，而EXT提供了方便的集成分页工具条的方式。

下面看一个完整的分页示例：
首先完成一些后台的准备工作，包括数据库表，DAO等。
Student表结构如下：
CREATE TABLE `student` (
`id` int(11) NOT NULL auto_increment,
`name` varchar(50) NOT NULL,
`age` int(2) NOT NULL,
`gender` char(1) NOT NULL,
`email` varchar(50) default NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `name_index` (`name`)
) ENGINE=InnoDB DEFAULT CHARSET=gbk;

其它类略

page.html
<html>
<head>
    <title>page.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <link rel="stylesheet" type="text/css" href="ext2/resources/css/ext-all.css" />
   <script type="text/javascript" src="ext2/adapter/ext/ext-base.js"></script>
   <script type="text/javascript" src="ext2/ext-all.js"></script>
   <script type="text/javascript" src="ext2/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="page.js" charset="gbk"></script>
</head>
<body>
    <div id="grid"></div>
</body>
</html>

page.js
Ext.onReady(function(){
     var cm = new Ext.grid.ColumnModel([
         {header:'编号',dataIndex:'id',sortable:true},
         {header:'名称',dataIndex:'name',sortable:true},
         {header:'年龄',dataIndex:'age',sortable:true},
         {header:'性别',dataIndex:'gender',sortable:true},
         {header:'邮箱',dataIndex:'email',sortable:true}
     ]);

     var store = new Ext.data.Store({
     proxy:new Ext.data.HttpProxy({url:'servlet/StudentServlet'}),
         reader: new Ext.data.JsonReader({
         totalProperty:'totalProperty',
         root:'root'
         }, [
             {name: 'id'},
             {name: 'name'},
             {name: 'age'},
             {name: 'gender'},
             {name: 'email'}
         ])
     });

(4) 与服务器交互
在实际的应用中，表格中的数据一般都是直接存放在数据库表或服务器的文件中。因此，在使用表格控件的时候经常需要与服务器进行交互。ExtJS 使用Ajax 方式提供了一套与服务器交互的机制，也就是可以不用刷新页面，就可以访问服务器的程序进行数据读取或数据保存等操作。比如前面在表格中显示xml 文档中数据的例子中，就是一个非常简单的从服务器端读取数据的例子，再回顾一下代码：
var store=new Ext.data.Store({
  url: 'test.xml',
  reader:new Ext.data.XmlReader(
   {record:"row"},
   ["id","name","organization","homepage"]
  )
});

因为Sote 组件接受一个参数url，如果设置url，则ExtJS 会创建一个与服务器交互的Ext.data.HttpProxy 对象，该对象通过指定的Connection 或Ext.Ajax.request 来向服务端发送请求，从而可以读取到服务器端的数据。经验表明，服务器端产生JSon 数据是一种非常不错的选择，也就是说假如服务器的url“student.jsp?cmd=list”产生下面的JSON 数据输出：
{results:[
{id:1,name:'小王',email:'xiaowang@yahoo.com',sex:'男',bornDate:'1991-4-4'},
{id:1,name:'小李',email:'xiaoli@yahoo.com',sex:'男',bornDate:'1992-5-6'},
{id:1,name:'小兰',email:'xiaoxiao@yahoo.com',sex:'女',bornDate:'1993-3-7'}
] }

则前面显示学习信息编辑表格的store 可以创建成下面的形式：
var store=new Ext.data.Store({
url:"student.jsp?cmd=list",
reader:new Ext.data.JsonReader({
root:"result"},
["id","name","organization","homepage"])
});

或者：
var store=new Ext.data.JsonStore({
url:"student.jsp?cmd=list",
root:"result",
fields:["id","name","organization","homepage"]
});

其中root 表示包含记录集数据的属性。
如果在运行程序中需要给服务器端发送数据的时候，此时可以直接使用ExtJS 中提供的Ext.Ajax 对象的request 方法。
比如下面的代码实现放服务器的student.jsp?cmd=save 这个url发起一个请求，并在params 中指定发送的Student 对象：
index.jsp
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
  Ext.Ajax.request({
   url:'student.jsp?cmd=save',
   method:"post",
   success:sFn,
   failure:fFn,
   params:{name:'小李',email:'xiaoli@163.com',bornDate:'1992-5-6',sex:'男'}
  });
});
});
function sFn(){
alert("保存成功");
}
function fFn(){
alert("保存失败");
}

student.jsp
<%
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String sex = request.getParameter("sex");
String bornDate = request.getParameter("bornDate");
String email = request.getParameter("email");
System.out.println("name:"+name);
System.out.println("sex:"+ sex);
System.out.println("bornDate:"+bornDate);
System.out.println("email:"+email);
%>