要结合使用EXT和DWR，不需要对后台程序进行任何修改，可以直接让前后台数据进行交互。不过还要考虑很多细节，比如Grid分页、刷新、排序、搜索等常见的操作。EXT的官方网站上已经有人放上了DWRProxy，借助它可以让DWR和EXT连接得更加紧密。不过，需要在后台添加DWRProxy所需要的Java类，这可能不是最好的解决方案。但我们相信，通过对它的内在实现的讨论，我们可以有更多的选择和想象空间。
注意 这个DWRProxy.js一定要放在ext-base.js和ext-all.js后面，否则会出错。
我们现在就用DWRProxy来实现一个分页的示例。除了准备好插件DWRProxy.js外，还要在后台准备一个专门用于分页的封装类。因为不仅要告诉前台显示哪些数据，还要告诉前台一共有多少条数据。现在我们来重点看一下ListRange.java，如下面的代码所示。
public class ListRange {
Object[] data;
int totalSize;
}
其实ListRange非常简单，只有两个属性：提供数据的data和提供数据总量的totalSize。再看一下InfoManager.java，为了实现分页，我们专门编写了一个getItems方法，代码如下所示。
public ListRange getItems(Map conditions) {
int start = 0;
int pageSize = 10;
int pageNo = (start / pageSize) + 1;
try {
start = Integer.parseInt(conditions.get("start").toString());
pageSize = Integer.parseInt(conditions.get("limit").toString());
pageNo = (start / pageSize) + 1;
} catch (Exception ex) {
ex.printStackTrace();
}
List list = infoList.subList(start, start + pageSize);
return new ListRange(list.toArray(), infoList.size());
}
getItems()的参数是Map，我们从中获得需要的参数，比如start和limit。不过HTTP里的参数都是字符串，而我们需要的是数字，所以要对类型进行相应的转换。根据start和limit两个属性从全部数据中截取一部分，放进新建的ListRange中，然后把生成的ListRange返回给前台，于是一切都解决了。
重头戏要上演了，我们就要使用传说中的Ext.data.DWRProxy了，还有Ext.data.List- RangeReader。通过这两个扩展，EXT完全可以支持DWR的数据传输协议。实际上，这正是EXT要把数据和显示分离设计的原因，这样你只需要添加自定义的proxy和reader，不需要修改EXT的其他部分，就可以实现从特定途径获取数据的功能。后台还是DWR，所以至少在Grid部分，我们可以很好地使用它们的结合，主要代码如下所示。
var store = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(infoManager.getItems, true),
reader: new Ext.data.ListRangeReader({
totalProperty: 'totalSize',
root: 'data',
id: 'id'
}, info),
remoteSort: true
});
与我们上面说的一样，我们修改了proxy，也修改了reader，其他地方都不需要进行修改，Grid已经可以正常运行了。需要提醒的是DWRProxy的用法，其中包括两个参数：第一个是dwr- Call，它把一个DWR函数放进去，它对应的是后台的getItems方法；第二个参数是paging- AndSort，这个参数控制DWR是否需要分页和排序。
ListRangeReader部分与后台的ListRange.java对应。totalProperty表示后台数据总数，我们通过它指定从ListRange中读取totalSize属性的值来作为后台数据总数。还需要指定root参数，以告诉它在ListRange中的数据变量的名称为data，随后DWRProxy会从ListRange中的data属性中获取数据并显示到页面上。如果不想使用我们提供的ListRange.java类，也可以自己创建一个类，只要把totalProperty和data两个属性与之对应即可。