数据格式:

{'totalCount':'3','rows':[
  {"id":"17","instructions_no":"CO081027_00439","unit_name":"部门名称1","category_name":"楼书",
  "request_title":"部门名称1 楼书广告","request_context":"部门名称1","require_completion_time":"2008-10-31",
  "require_personnel":"","action_name":"批准","remark":"部门名称1","annex":"3"},
  {"id":"18","instructions_no":"CO081027_00440","unit_name":"部门名称2二期","category_name":"楼书",
  "request_title":"部门名称2 楼书广告","request_context":"部门名称2 楼书广告","require_completion_time":"2008-11-21",
  "require_personnel":"","action_name":"批准","remark":"部门名称2 楼书广告","annex":"0"}
  ]}

JSON读取方式 一:

	var reader=new Ext.data.JsonReader({
				root:'rows',
				totalProperty:'totalCount',
				fields:['instructions_no','unit_name','category_name','request_title',
						'request_context','require_completion_time','action_name','remark'
					]
			});

	var store=new Ext.data.GroupingStore({
			id:'GroupStore',
			reader: reader,
			remoteSort:true,
            sortInfo:{field: 'instructions_no', direction: 'ASC'},
            groupField:'instructions_no',
			proxy:new Ext.data.HttpProxy({
				url:'RequestInfo.do?cmd=List',
				autoAbort:true,
				disableCaching:true,
				timeout:180000,
				method:'POST'
			})
        });
		store.load();

JSON读取方式二:

	var store=new Ext.data.GroupingStore({
			url:'RequestInfo.do?cmd=List',
			reader: new Ext.data.JsonReader({
				root:'rows',
				totalProperty:'totalCount',
				remoteSort:true,
				fields:[
					{name:'instructions_no'},
					{name:'unit_name'},
					{naem:'category_name'},
					{name:'request_title'},
					{name:'request_context'},
					{name:'require_completion_time'},
					{name:'action_name'},
					{name:'remark'}
					]
			}),
            sortInfo:{field: 'instructions_no', direction: 'ASC'},
            groupField:['unit_name']
        });
		store.load();

分组表格 JS代码,groupGrid.js

Ext.BLANK_IMAGE_URL = 'lib/extjs/resources/images/default/s.gif';
Ext.onReady(function(){

    Ext.QuickTips.init();
    
    var xg = Ext.grid;

//===============第一种方式获取JSON数据================================// 
/*
	var reader=new Ext.data.JsonReader({
				root:'rows',
				totalProperty:'totalCount',
				fields:['instructions_no','unit_name','category_name','request_title',
						'request_context','require_completion_time','action_name','remark'
					]
			});

	var store=new Ext.data.GroupingStore({
			id:'GroupStore',
			reader: reader,
			remoteSort:true,
            sortInfo:{field: 'instructions_no', direction: 'ASC'},
            groupField:'instructions_no',
			proxy:new Ext.data.HttpProxy({
				url:'RequestInfo.do?cmd=List',
				autoAbort:true,
				disableCaching:true,
				timeout:180000,
				method:'POST'
			})
        });
		store.load();
*/		
//========================================================================//

//===============第二种方式获取JSON数据================================// 
	var store=new Ext.data.GroupingStore({
			url:'RequestInfo.do?cmd=List',
			reader: new Ext.data.JsonReader({
				root:'rows',
				totalProperty:'totalCount',
				remoteSort:true,
				fields:[
					{name:'instructions_no'},
					{name:'unit_name'},
					{naem:'category_name'},
					{name:'request_title'},
					{name:'request_context'},
					{name:'require_completion_time'},
					{name:'action_name'},
					{name:'remark'}
					]
			}),
            sortInfo:{field: 'instructions_no', direction: 'ASC'},
            groupField:['unit_name']
        });
		store.load();
//====================================================================//

    var grid = new xg.GridPanel({
        store: store,
        columns: [
				new Ext.grid.RowNumberer(),//获得行号
				{header: "项目编号", sortable:true,width: 300, dataIndex:"instructions_no"},
				{header: "部门名称", sortable:true,width: 300, dataIndex:"unit_name"},
				{header: "项目类型", sortable:true,width: 300, dataIndex:"category_name"},
				{header: "项目标题", sortable:true,width: 300, dataIndex:"request_title"},
				{header: "项目内容", sortable:true,width: 300, dataIndex:"request_context"},
				{header: "计划时间", sortable:true,width: 300, dataIndex:"require_completion_time"},
				{header: "审批状态", sortable:true,width: 300, dataIndex:"action_name"},
				{header: "备注", sortable:true,width: 300, dataIndex:"remark"}
        ],

        view: new Ext.grid.GroupingView({
            forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        }),
        frame:true,
        width: 900,
        height: 450,
        collapsible: true,
        animCollapse: false,
        title: '协作信息',
        iconCls: 'icon-grid',
        renderTo: document.body
    });
});

Html显示页面:groupView.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="default.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" /> 
<script type="text/javascript" src="lib/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/extjs/ext-all.js"></script>
<script language="javascript" type="text/javascript" src="lib/main/ext-lang-zh_CN.js"></script>
</head>
<body>
<br>
<script type="text/javascript" src="lib/main/groupGrid.js"></script>
</body>
</html>