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

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

先看THML代码:

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Paging Grid-MHZG.NET</title>
  6. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
  7. <script type="text/javascript" src="../../bootstrap.js"></script>
  8. <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
  9. <script type="text/javascript" src="paing.js"></script>
  10. </head>
  11. <body>
  12. <div id="demo"></div>
  13. </body>
  14. </html>

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

JS代码:

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

关于数据,任何服务端都可以,只要返回相应的数据就可以了。这里简单使用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的ORDER BY里即可。
  9. start = Request("start")
  10. limit = Request("limit")
  11. If start = "" Then
  12.     start = 0
  13. End If
  14. If limit = "" Then
  15.     limit = 50
  16. End If
  17. sorts = Replace(Trim(Request.Form("sort")),"'",""
  18. dir = Replace(Trim(Request.Form("dir")),"'","")
  19. Dim counts:counts=300
  20. '注意,这里的counts相当于Rs.RecordCount,也就是记录总数。
  21. Dim Ls:Ls = Cint(start) + Cint(limit)
  22. If Ls >= counts Then
  23.    Ls = counts
  24. End If
  25. Echo("{")
  26. Echo("""total"":")
  27. Echo(""""&counts&""",")
  28. Echo("""items"":[")
  29. For i = start+1 To Ls
  30.    Echo("{")
  31.    Echo("""title"":""newstitle"&i&"""")
  32.    Echo(",")
  33.    Echo("""author"":""author"&i&"""")
  34.    Echo(",")
  35.    Echo("""hits"":"""&i&"""")
  36.    Echo(",")
  37.    Echo("""addtime"":"""&Now()&"""")
  38.    Echo("}")
  39.    If i<Ls Then
  40.      Echo(",")
  41.    End If
  42. Next
  43. Echo("]}")
  44. Function Echo(str)
  45.    Response.Write(str)
  46. End Function
  47. %>

 最后,来张效果图:

ExtJS4学习笔记(五)---Grid分页_第1张图片

你可能感兴趣的:(json,function,测试,Flex,asp,ExtJs)