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();
}
}
]
程式效果圖: