Ext Js 3.2中GroupView的使用
1：代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>gridPanel</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
<script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3.2/ext-all.js"></script>
<script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
//定义显示员工信息的列模型，包含了编号、员工姓名、性别、是否已婚和年龄
var cum = [
{header: '编号', dataIndex: 'id'},
{header: '员工姓名', dataIndex: 'name'},
{header: '出生日期', dataIndex: 'birthday'},
{header: '性别', dataIndex: 'sex'},
{header: '是否已婚', dataIndex: 'isMarry'},
{header: '年龄', dataIndex: 'age'},
];
//定义了一个数据解读器，用来解读data数组中的数据
var reader = new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
{name: 'birthday'},
{name: 'sex'},
{name: 'isMarry'},
{name: 'age'}
]);
//将在表格中显示的员工信息数据
var data = [
['1', '王鹏', '1975-04-03', '男', '已婚', '35'],
['2', '杨澜', '1965-05-08', '男', '已婚', '45'],
['3', '王晶晶', '1985-12-05', '女', '未婚', '25'],
['4', '高耀', '1991-11-08', '男', '未婚', '19'],
['5', '姜静', '1989-05-09', '女', '未婚', '21'],
];
var store = new Ext.data.GroupingStore({
reader: reader,
data: data,
groupField: 'isMarry', //用分组的列
sortInfo: {field: 'id', direction: 'ASC'} //用sortInfo指定字段id进行ASC升序排列，该属性是必须的
});
var grid = new Ext.grid.GridPanel({
store: store,
height: 220,
columns: cum,
view: new Ext.grid.GroupingView(),
renderTo: 'cumGrid'
});
});
</script>
</head>
<body>
<div id="cumGrid"> </div>
</body>
</html>
2：程序效果图
3：Ext.grid.GroupingView的配置操作
自定义一个.GroupingView，代码如下：
var grid = new Ext.grid.GridPanel({
store: store,
height: 220,
width: 620,
columns: cum,
view: new Ext.grid.GroupingView({
sortAsText: '升序',
sortDescText: '降序',
columnsText: '表格字段',
groupByText: '使用当前字段进行分组',
showGroupsText: '表格分组',
groupTextTpl: '{text}(共{[values.rs.length]}条)'
}),
renderTo: 'cumGrid'
});
程序效果图：
3：除了可以配置外，还可以通过调用它的一些方法对视图进行操作，在上面代码的基础上添加一个tbar属性，定义三个按钮，用来展开所有组、
收缩所有组、代码如下：
tbar: [
{
text: '展开所有组',
handler: function() {
grid.getView().expandAllGroups();
}
},
{
text: '收缩所有组',
handler: function() {
grid.getView().collapseAllGroups();
}
},
{
text: '展开/收缩',
handler: function() {
grid.getView().toggleAllGroups();
}
}
]
程序效果图：
