ExtJS4学习--多表头Grid

最新推荐文章于 2017-03-21 13:21:45 发布

黑夜中的一点慰藉

最新推荐文章于 2017-03-21 13:21:45 发布

阅读量1.4w

点赞数 1

分类专栏： javascript 文章标签： ext

javascript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

转载来源：http://www.mhzg.net/a/20115/201151911240247.html

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

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

先看下效果图：

实现代码如下：

HTML代码：

       
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>GroupHeaderGrid-MHZG.NET</title>
 <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
 <script type="text/javascript" src="../../bootstrap.js"></script>
 <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
 <script type="text/javascript" src="group-header.js"></script>
 </head>
 
 <body>
 <div id="demo"></div>
 </body>
 </html>

group-header.js：

       
   
 Ext.require([
     'Ext.grid.*',
     'Ext.toolbar.Paging',
     'Ext.util.*',
     'Ext.data.*'
 ]);
 
 Ext.onReady(function(){
     Ext.define('MyData',{
         extend: 'Ext.data.Model',
         fields: [
             'title','author',
             //第一个字段需要指定mapping，其他字段，可以省略掉。
             {name:'hits',type: 'int'},
              'addtime'
         ]
     });
     
     //创建数据源
     var store = Ext.create('Ext.data.Store', {
         //分页大小
         pageSize: 50,
         model: 'MyData',
         //是否在服务端排序
         remoteSort: true,
         proxy: {
            //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
             type: 'ajax',
             url: 'mydata.asp',
             
             reader: {
                 root: 'items',
                 totalProperty  : 'total'
             },
             simpleSortMode: true
         },
         sorters: [{
             //排序字段。
             property: 'hits',
             //排序类型，默认为 ASC
             direction: 'DESC'
         }]
     });
     
     //创建Grid
     var grid = Ext.create('Ext.grid.Panel',{
         store: store,
         columnLines: true,
         columns: [{
             text:"基本信息",
             columns:[
                 {text: "标题", width: 120, dataIndex: 'title', sortable: true},
                 {text: "作者", width: 200, dataIndex: 'author', sortable: false},
                 {text: "点击数", width: 100, dataIndex: 'hits', sortable: true}]
             },
             {text: "添加时间", width: 100, dataIndex: 'addtime', sortable: true}
         ],
         height:400,
         width:520,
         x:20,
         y:40,
         title: 'ExtJS4 多表头Grid带分页示例',
         disableSelection: true,
         loadMask: true,
         renderTo: 'demo',
         viewConfig: {
             id: 'gv',
             trackOver: false,
             stripeRows: false
         },
         
         bbar: Ext.create('Ext.PagingToolbar', {
             store: store,
             displayInfo: true,
             displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
             emptyMsg: "没有数据"
         })
     })
     store.loadPage(1);
 })

JS代码要注意的地方：

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

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

服务端代码，这里使用ASP编写，具体解释请参考前一篇文章。

       
   
 <%
     Response.ContentType = "text/html"
     Response.Charset = "UTF-8"
 %>
 <%
 '返回JSON数据,自定义一些测试数据。。
 '这里的参数与EXT3.x相同，区别在于排序字段和排序方式使用了新的属性。
 '由于这里是测试数据，接收的参数只用到了start,limit。sorts和dir在实际操作过程中，将之加入SQL的ORDER BY里即可。
 start = Request("start")
 limit = Request("limit")
 If start = "" Then
     start = 0
 End If
 If limit = "" Then
     limit = 50
 End If
 sorts = Replace(Trim(Request.Form("sort")),"'","") 
 dir = Replace(Trim(Request.Form("dir")),"'","")
 
 Dim counts:counts=300
 '注意，这里的counts相当于Rs.RecordCount,也就是记录总数。
 
 Dim Ls:Ls = Cint(start) + Cint(limit)
 If Ls >= counts Then
    Ls = counts
 End If
 
 Echo("{")
 Echo("""total"":")
 Echo(""""&counts&""",")
 Echo("""items"":[")
 For i = start+1 To Ls
    Echo("{")
    Echo("""title"":""newstitle"&i&"""")
    Echo(",")
    Echo("""author"":""author"&i&"""")
    Echo(",")
    Echo("""hits"":"""&i&"""")
    Echo(",")
    Echo("""addtime"":"""&Now()&"""")
    Echo("}")
    If i<Ls Then
      Echo(",")
    End If
 Next
 Echo("]}")
 Function Echo(str)
    Response.Write(str)
 End Function
 %>