巧用Ext的RowExpander实现异步调用

原创|其它|编辑:郝浩|2009-12-30 10:08:31.000|阅读 840 次

概述:目前Ext Grid的RowExpander使用的模板,是在读取Grid同步加载,实际上这样的处理并不是很好,如果数据量大的话,对性能会有一定影响,更好的处理方式是异步加载,只有需要的时候再加载需要的数据。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

  目前Ext Grid的RowExpander使用的模板,是在读取Grid同步加载,实际上这样的处理并不是很好,如果数据量大的话,对性能会有一定影响,更好的处理方式是异步加载,只有需要的时候再加载需要的数据。下面介绍如果实现:

  一,下载此文件http://blog.cutterscrossing.com/enclosures/rowexpander%5Fexample%2Ezip ,这是国外一个朋友扩展的RowExpander,我对比了几种处理方式,他这个写的最简洁,而且最容易使用,所以推荐大家使用他的RowExpander。他的Blog主页:http://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=你的数据”,这样就可以实现多个实例共用了!


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:网络转载

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP