您的位置: 首页  >  文章  >  ExtJS4学习笔记(八)---Grid分页

ExtJS4学习笔记(八)---Grid分页

分类: 文章 • 2023-02-26 00:30:13

Grid组件，当数据量很大的时候，就需要分页显示，本文介绍如何实现Extjs4 Grid的分页功能。

先看THML代码:

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>PagingGrid-MHZG.NET</title>
  6. <linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>
  7. <scripttype="text/javascript"src="../../bootstrap.js"></script>
  8. <scripttype="text/javascript"src="../../locale/ext-lang-zh_CN.js"></script>
  9. <scripttype="text/javascript"src="paing.js"></script>
  10. </head>

  12. <body>
  13. <divid="demo"></div>
  14. </body>
  15. </html>

这里引用的JS文件，都是相对于Extjs4整个目录的。如果已经将JS和CSS文件剥离并分目录放置了，那么一定要注意修改bootstrap.js。

JS代码：

  1. Ext.require([
  2. 'Ext.grid.*',
  3. 'Ext.toolbar.Paging',
  4. 'Ext.data.*'
  5. ]);

  7. Ext.onReady(function(){
  8. Ext.define('MyData',{
  9. extend:'Ext.data.Model',
  10. fields:[
  11. 'title','author',
  12. //第一个字段需要指定mapping，其他字段，可以省略掉。
  13. {name:'hits',type:'int'},
  14. 'addtime'
  15. ]
  16. });
  18. //创建数据源
  19. varstore=Ext.create('Ext.data.Store',{
  20. //分页大小
  21. pageSize:50,
  22. model:'MyData',
  23. //是否在服务端排序
  24. remoteSort:true,
  25. proxy:{
  26. //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
  27. type:'ajax',
  28. url:'mydata.asp',
  30. reader:{
  31. root:'items',
  32. totalProperty:'total'
  33. },
  34. simpleSortMode:true
  35. },
  36. sorters:[{
  37. //排序字段。
  38. property:'hits',
  39. //排序类型，默认为ASC
  40. direction:'DESC'
  41. }]
  42. });
  44. //创建Grid
  45. vargrid=Ext.create('Ext.grid.Panel',{
  46. store:store,
  47. columns:[
  48. {text:"标题",width:120,dataIndex:'title',sortable:true},
  49. {text:"作者",flex:200,dataIndex:'author',sortable:false},
  50. {text:"点击数",width:100,dataIndex:'hits',sortable:true},
  51. {text:"添加时间",width:100,dataIndex:'addtime',sortable:true}
  52. ],
  53. height:400,
  54. width:520,
  55. x:20,
  56. y:40,
  57. title:'ExtJS4Grid分页示例',
  58. disableSelection:true,
  59. loadMask:true,
  60. renderTo:'demo',
  61. viewConfig:{
  62. id:'gv',
  63. trackOver:false,
  64. stripeRows:false
  65. },
  67. bbar:Ext.create('Ext.PagingToolbar',{
  68. store:store,
  69. displayInfo:true,
  70. displayMsg:'显示{0}-{1}条，共计{2}条',
  71. emptyMsg:"没有数据"
  72. })
  73. })
  74. store.loadPage(1);
  75. })

关于数据，任何服务端都可以，只要返回相应的数据就可以了。这里简单使用ASP代码做了一些测试用的数据，但是这些测试代码包含了参数接收、基本判断以及分页方法。具体情况具体实施，这些代码只作为抛砖引玉的作用。

ASP代码：

  1. <%
  2. Response.ContentType="text/html"
  3. Response.Charset="UTF-8"
  4. %>
  5. <%
  6. '返回JSON数据,自定义一些测试数据。。
  7. '这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。
  8. '由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将之加入SQL的ORDERBY里即可。
  9. start=Request("start")
  10. limit=Request("limit")
  11. Ifstart=""Then
  12. start=0
  13. EndIf
  14. Iflimit=""Then
  15. limit=50
  16. EndIf
  17. sorts=Replace(Trim(Request.Form("sort")),"'","")
  18. dir=Replace(Trim(Request.Form("dir")),"'","")

  20. Dimcounts:counts=300
  21. '注意，这里的counts相当于Rs.RecordCount,也就是记录总数。

  23. DimLs:Ls=Cint(start)+Cint(limit)
  24. IfLs>=countsThen
  25. Ls=counts
  26. EndIf

  28. Echo("{")
  29. Echo("""total"":")
  30. Echo(""""&counts&""",")
  31. Echo("""items"":[")
  32. Fori=start+1ToLs
  33. Echo("{")
  34. Echo("""title"":""newstitle"&i&"""")
  35. Echo(",")
  36. Echo("""author"":""author"&i&"""")
  37. Echo(",")
  38. Echo("""hits"":"""&i&"""")
  39. Echo(",")
  40. Echo("""addtime"":"""&Now()&"""")
  41. Echo("}")
  42. Ifi<LsThen
  43. Echo(",")
  44. EndIf
  45. Next
  46. Echo("]}")
  47. FunctionEcho(str)
  48. Response.Write(str)
  49. EndFunction
  50. %>

最后，来张效果图：

ExtJS4学习笔记(八)---Grid分页


相关推荐