ExtJS4学习--多表头Grid

转载来源：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

%>