`
dowhathowtodo
  • 浏览: 777450 次
文章分类
社区版块
存档分类
最新评论

ExtJS4学习笔记(九)---多表头Grid

 
阅读更多

做项目的时候，有时候会遇到多表头的Grid，在EXTJS4中，多表头的实现已经很简单了，本文介绍如何实现多表头gird的功能。

之前有一篇文章，讲的是如何实现Grid的分页功能（地址是：www.mhzg.net/a/20115/201151811170246.html），本文在此基础上做出修改，达到多表头Grid+分页功能。

先看下效果图：

实现代码如下：

HTML代码：

  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>GroupHeaderGrid-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="group-header.js"></script>
  10. </head>

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

group-header.js：

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

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

JS代码要注意的地方：

1、记得载入'Ext.util.*',

2、二级表头必须指定宽度，如果不指定的话，会提示错误。如图所示，红框里的项，必须要指定宽度。

服务端代码，这里使用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分页
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics