现在开始进入CRUD+分页+复杂查询+排序的解析了。它们的完整代码在前面的init-house.js上。
我们的大体思路是，列表，查询，添加，修改都采用ExtJS访问后台的方式，而按id查找单条记录和批量删除则交给DWR来完成，下面我们按照功能划分来逐一分析。
首先是带分页的列表功能。核心实现代码如下：
ds = new Ext.data.Store({
// proxy: new Ext.data.MemoryProxy(jsondata),
proxy : new Ext.data.HttpProxy({
url : '../house.do'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'totalProperty',
root : 'root'
}, [{
name : 'hid'
}, {
name : 'title'
}, {
name : 'linkman'
}, {
name : 'linktel'
}, {
name : 'hireprice'
}, {
name : 'booktimeInfo'
}, {
name : 'roomTing'
}, {
name : 'areaStreet'
}])
});
ds.load({
params : {
start : 0,
limit : limit
}
});
Ext.data.Store是ExtJS里面非常重要的一个类，它一般翻译成数据源，因为它决定了在哪里获得数据以及如何解析数据。根据上面的代码，我们知道，这个数据源是通过访问远程服务器上../house.do对应的资源，并且会得到一个JSON对象，这个服务器端返回的JSON对象里面包括两个名称分别为totalProperty和root，前者代码总记录条数，后者则是当前页的记录数。我们首次访问数据源，当然是加载从0开始的最多limit（定义的变量）条数据，以后就可以根据ExtJS提供的分页工具栏来得到翻页的数据。start和limit这两个参数会通过HTTP协议传递给服务器端程序，这样在我们后台代码中就可以利用这两个参数来完成带分页的列表功能，务必要注意的是就是服务器端要返回JSON格式的数据，否则Store无法解析！
然后是强大的查询功能。核心代码如下：
function query() {
// 这里是关键，重新载入数据源，并把搜索表单值提交
ds.load({
params : {
start : 0,
limit : ptb.getPageSize(),
'cond.title' : Ext.get('title').dom.value,
'cond.areaId' : Ext.get('area').dom.value,
'cond.streetId' : Ext.get('street').dom.value,
'cond.room' : Ext.get('room').dom.value,
'cond.ting' : Ext.get('ting').dom.value,
'cond.booktime' : Ext.get('booktime').dom.value,
'cond.priceStart' : Ext.get('priceStart').dom.value,
'cond.priceEnd' : Ext.get('priceEnd').dom.value,
'cond.sortCond' : DWRUtil.getValue("sortCond")
// 换一种方式获取radio里的值
// 取得搜索表单文本域的值，发送到服务端
}
})
}
我们做了一个多字段条件组合的查询表单，点击确定按钮将会触发query()函数，在query()函数中我们重新载入了数据源，大家要注意的是所带的参数，Ext.get('title').dom.value和DWRUtil.getValue("sortCond")都是获得表单字段值的方法，前面的就是参数名。大家可能有两处感到奇怪，首先ptb.getPageSize()是什么，为什么这么写？再就是前面的参数名为什么是cond.title这样子，可以改成其它名字吗？第一个问题如果大家不需要在页面上动态改变每页显示记录条数的话，就可以写成一个常量的。但在我们的应用中扩展了默认的分页工具栏，让它带有自由改变每页显示记录数的功能。这样我们在做查询的时候，就要和分页工具栏的设置保持一致。其中，ptb指的就是分页栏对象。第二个问题就要大家动下脑筋了。大家都知道struts有自动将页面上表单数据填充到ActionForm属性值的功能，但是现在我们都是用实体类做ActionForm的属性。那么，为了struts能够将提交表单的参数正确设置到ActionForm对象中，我们要付出的一点点代价就是参数的名字都要加上DTO属性名的前缀！在这里，我们真正做到了数据检索的三大难点：分页，排序（客户端和服务器端都可以）和过滤！
接着是添加功能，核心代码如下：
handler : function() {
if (form.form.isValid()) {// 验证合法后使用加载进度条
// 提交到服务器操作
form.form.doAction('submit', {
url : '../houseHandler.do?action=addHouse',// 文件路径
method : 'post',// 提交方法post或get
params : '',
// 提交成功的回调函数
failure : function(retForm, retAction) {
if (retAction.result
&& retAction.result == '1') {
Ext.MessageBox.alert('提示', '保存数据成功！');
win.hide();
ptb.cursor=ptb.store.getTotalCount()+1-ptb.pageSize;
ds.load({
params : {
start : ptb.cursor,
limit : ptb.pageSize
}
});
} else if (retAction.result
&& retAction.result == 'error') {
Ext.MessageBox.alert('提示', '保存数据失败！');
} else {
Ext.Msg.alert('错误', '服务器出现错误请稍后再试！');
}
},
waitMsg : '保存数据...'
});
}
}
如果大家还记得上次的登陆应用，应该发现添加表单提交的过程和登陆差不多，只是有几点细微的区别大家要注意。首先是我们上面值定义了failure的情况，而默认如果服务器端返回的不是JSON对象，就是failure。所以我们这里服务器端处理Action不需要返回JSON数据，而只需要返回一个数字1，因为在客户端只要接收到1的返回，才认为服务器端添加操作执行成功。它才会做出成功的提示，并且重新加载最后一页的数据（因为刚添加进去的数据总是默认出现在最后一页，所以添加完数据直接显示最后一页的记录是很人性化的功能！）
再接着是编辑功能，核心代码和添加几乎一模一样，只是编辑多了个ID的只读表单属性。它需要告诉服务器端要修改的是那条记录！然后就是编辑过后，数据刷新但是依然停留在编辑记录所在页（和添加一样人性化）！
然后是按id查找单条记录，这是打开编辑窗口之前要做的事情，因为编辑就是修改原有的记录，所以我们要先利用DWR得到服务器端某ID对应的房屋信息，然后将它显示在编辑表单中。
最后就是批量删除，我们利用复选框得到所要删除的ID值，再利用DWR将它们以动态数组的形式传到服务器端进行批量删除。并且删除完后也是停留在最适合的页面。这样，我们就完成了基本的CRUD以及分页，复杂查询等功能。下面是效果图：
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/lenotang/archive/2008/10/13/3068064.aspx
分享到：
相关推荐
Extjs-ExtDesigner-1.1.2+完全解密工具.part1.rar
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略，特别是在大数据量的情况下，它将数据分批加载，避免一次性加载所有记录导致的...
1. **组件化开发**：ExtJS 4引入了全新的组件模型，使得开发者可以轻松地创建复杂、可重用的UI组件。这些组件可以像积木一样组合，构建出复杂的用户界面。 2. **数据绑定**：框架提供了一套强大的数据绑定机制，...
**ExtJS实战——发布小纸条** 在Web应用开发中，ExtJS是一个强大的JavaScript库，它提供了丰富的用户界面组件和强大的数据绑定功能。本实战案例将带你深入理解如何结合ExtJS、Struts和MySQL来创建一个实用的“发布...
ExtJS是一个强大的JavaScript库，专为构建富客户端Web应用程序而设计。它提供了丰富的组件和API，使得开发者可以创建复杂的、数据驱动的用户界面。在本主题中，我们将深入探讨如何配置ExtJS运行环境，以及与之相关的...
3. 加载和查询逻辑：当用户输入关键词或切换分页时，LOV Combo需要向服务器发送请求获取对应的数据。这可以通过监听store的load事件和 Combobox的queryMode属性（一般设置为 'remote'）来实现。 4. 自定义模板：...
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
ExtJS4-CRUD ExtJS 4 MVC CRUD 教程演示了使用 sencha 的 ExtJS 4 框架和 MVC 使用 ExtJS Grid 创建/读取/更新/删除记录（书籍）。 在我的博客上阅读全文。 输出： 在任何浏览器中打开 HTML 文件，输出将类似于下...
- 数据网格是ExtJS中的核心组件，用于展示大量结构化数据，并支持排序、分页、筛选等多种功能。 - 它能够动态地从服务器获取数据，实现数据的实时更新和交互。 - 在这个项目中，`Extjs-crud-grid`可能是一个实现...
ExtJS 是一个流行的JavaScript框架，专门用于构建富互联网应用程序（RIA）。版本4.0.7是这个框架的一个重要里程碑，提供了丰富的组件库、强大的数据管理、优雅的API以及高效的性能优化。它允许开发者使用纯...
Struts2、Hibernate和CRUD（Create, Read, Update, Delete）是Java Web开发中的核心框架和技术，而ExtJS则是一种流行的JavaScript库，用于构建富客户端应用。这个"Struts2+Hibernate+Crud+For_Extjs用户管理程序"是...
这是本人自己总结最好用的通用后台管extjs+MySQL+oracle+SQL server数据库源码：主要运用了一下的知识： 1、主要运用的后台框架是extjs， 2、jsp+hibernate+Struts2+spring+ajax+jQuery， 3、用到了Java面向对象的...
ExtJS 4.2+Hibernate 4.1.7+Spring MVC 3.2.8完成的后台管理项目，觉得是值得参考的实用项目 下载链接
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
ExtJS4.1+MVC4+Spring.NET1.3+EF5 整合项目数据库（pdm、sql及sqlite数据库） 原文地址：http://blog.csdn.net/xz2001/article/details/8723266
ExtJS开发实战 ExtJS开发实战 上传只能选资源分，没办法，我想免费分享的
SSH+Extjs开发视频教程-基于SSH+Maven+Extjs4+MySQL技术实战开发CRM客.doc
该系统的核心亮点在于其采用了ExtJS前端框架与Struts2、Hibernate整合的SSH（Spring、Struts2、Hibernate）后端框架，这为系统提供了强大的功能和高效的性能。 首先，ExtJS是一个富客户端JavaScript库，它提供了...