计算机二级辅导：如何让Ext的RowExpander实现异步调用
发布时间：2010/4/5 17:45:48 来源：城市学习网 编辑：admin
目前Ext Grid的RowExpander使用的模板，是在读取Grid同步加载，实际上这样的处理并不是很好，如果数据量大的话，对性能会有一定影响，更好的处理方式是异步加载，只有需要的时候再加载需要的数据。下面介绍如果实现：
一，下载此文件http://blog.cutterscrossing.com/enclosures/rowexpander%5Fexample%2Ezip ，这是国外一个朋友扩展的RowExpander，我对比了几种处理方式，他这个写的最简洁，而且最容易使用，所以推荐大家使用他的RowExpander。他的Bloghttp://blog.cutterscrossing.com/index.cfm?mode=entry&entry=E7D79511-3048-71C2-177E88E50F9A699D
二，将下载的压缩文件用WinRar或者别的压缩文件解压缩，将“rowexpander_example“resources“js“custom”目录中的“RowExpander.js”加入你要用的页面中，这个就是我们要使用的RowExpander。
三，在页面中使用这个RowExpander。其实就是在想使用RowExpander的页面中实例化这个RowExpander，实现异步加载数据的方法。在你定义好了自己的Grid的前提下，使用的具体代码示例
// RowExpander实例化
var expander = new Ext.grid.RowExpander( {
remoteDataMethod :getRemoteData
})
//调用远程数据函数
function getRemoteData(){
//你要实现的调用远程数据的代码
//更新数据到页面中，最终数据显示靠这个实现，必须使用！！
Ext.getDom(‘remData‘ + index).innerHTML = 得到的数据;
}
实际上已经有很完整的示例在那位的程序中了“rowexpander_example“resources“js“custom“gridtest.js”。
注意问题：
这个远程方法最后是通过innerHTML 方法把得到的数据显示在页面中，如果页面使用了多个Grid，创建了多个RowExpander实例，那么就需要修改RowExpander.js里面的一点代码了，否则一直显示数据在一个DIV中，同时页面中也要区别要把数据显示在哪个DIV中。
1，修改RowExpander中的beforeExpand，将if (this.remoteDataMethod) {}中原来的代码修改成你要显示的DIV，原来的DIV名字为“remData”，修改成你想用的名字，如果是多个RowExpander实例，根据自己需要判断，生成多个不同名字的DIV。
2，页面显示数据在不同的DIV中。主要就是将数据innerHTML 在哪个DIV中。根据自己的需要判断后，调用“Ext.getDom(你的DIV编号 + index).innerHTML=你的数据”，这样就可以实现多个实例共用了！
:
