现在的位置: 首页 > 综合 > 正文

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

2012年04月08日 ⁄ 综合 ⁄ 共 3630字 ⁄ 字号 小 中 大 ⁄ 评论关闭

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>
  12. <body>
  13. <div id="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.     });
  17.     
  18.     //创建数据源
  19.     var store = 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',
  29.             
  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.     });
  43.     
  44.     //创建Grid
  45.     var grid = 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: 'ExtJS4 Grid 分页示例',
  58.         disableSelection: true,
  59.         loadMask: true,
  60.         renderTo: 'demo',
  61.         viewConfig: {
  62.             id: 'gv',
  63.             trackOver: false,
  64.             stripeRows: false
  65.         },
  66.         
  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的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")),"'","")
  20. Dim counts:counts=300
  21. '注意，这里的counts相当于Rs.RecordCount,也就是记录总数。
  23. Dim Ls:Ls = Cint(start) + Cint(limit)
  24. If Ls >= counts Then
  25.    Ls = counts
  26. End If
  28. Echo("{")
  29. Echo("""total"":")
  30. Echo(""""&counts&""",")
  31. Echo("""items"":[")
  32. For i = start+1 To Ls
  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.    If i<Ls Then
  43.      Echo(",")
  44.    End If
  45. Next
  46. Echo("]}")
  47. Function Echo(str)
  48.    Response.Write(str)
  49. End Function
  50. %>

 最后，来张效果图：

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞