如图：
htm代码：
<!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>
<title>无标题页</title>
<style>
.RowStyle {
background-color:#EFF3FB;
}
.AlternatingRowStyle{
background-color:#ffffff;
}
</style>
<link rel="stylesheet" type="text/css" href="../../Client/Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../../Client/Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../Client/Ext/ext-all.js"></script>
<script type="text/javascript" src="../../Client/Ext/ux/ProgressBarPager.js"></script>
<script type="text/javascript" src="../../Client/Ext/ux/PagingMemoryProxy.js"></script>
<script type="text/javascript" src="../../Client/Ext/ux/SearchField.js"></script>
<!------------------------------------------------------------------------------------>
<link rel="stylesheet" type="text/css" href="../class/GroupGrid.css" />
<script type="text/javascript" src="../class/FormatWhere.js"></script>
<script type="text/javascript" src="../class/DateField.js"></script>
<script type="text/javascript" src="../class/NumberField.js"></script>
<script type="text/javascript" src="../class/chartWidow.js"></script>
<script type="text/javascript" src="../class/GroupGrid.js"></script>
</head>
<script language=javascript>
Ext.BLANK_IMAGE_URL="../../Client/Images/s.gif";
var cm1 = new Ext.grid.ColumnModel([
new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn}),
{
header:"序号",
dataIndex:"ID",
sortable:true
},{
header:"借书单号",
dataIndex:"BorrowNo",
searchable:true,
attribute:{type:"string"},
sortable:true
},{
header:"借书人",
dataIndex:"LoginName",
searchable:true,
attribute:{type:"string"},
sortable:true
},{
header:"借书时间",
dataIndex:"BorrowDate",
searchable:true,
attribute:{type:"date",dateFormat:"Y-m-d"},
renderer: Ext.util.Format.dateRenderer('Y-m-d'),
sortable:true
},{
header:"总费用",
width:55,
dataIndex:"TotalMoney",
attribute:{type:"float"},
sortable:true
}]);
var cm2 = new Ext.grid.ColumnModel([
new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn}),
{
header:"序号",
dataIndex:"ID",
sortable:true
},{
header:"借书单号",
dataIndex:"BorrowNo",
attribute:{type:"string",dateFormat:""},
sortable:true
},{
header:"借书人",
dataIndex:"LoginName",
attribute:{type:"string",dateFormat:""},
sortable:true
},{
header:"借书时间",
dataIndex:"BorrowDate",
attribute:{type:"date",dateFormat:"Y-m-d"},
renderer: Ext.util.Format.dateRenderer('Y-m-d'),
sortable:true
},{
header:"总费用",
width:55,
dataIndex:"TotalMoney",
attribute:{type:"float"},
sortable:true
}]);
var BorrowGrid1 = new Ext.tet.GroupGrid({
id:"BorrowGrid1",
pageSize:10,
DataSourceParams:{tableName:"TestReturnBook_View",key:"ID",query:null,search:null,groupBy:"BorrowDate",orderBy:"BorrowDate",ascDesc:"DESC"},
cm:cm1,
height:350,
tbar:[
new Ext.Toolbar.Fill(),"","-"
,{
text:"添加",
tooltip:"添加新信息",
iconCls:"addicon",
handler:function(){
//BorrowGrid2.render(document.getElementById("div2"));
}
}],listeners:{
'contextmenu':function(e)
{
e.stopEvent();
}
}
});
var BorrowGrid2 = new Ext.tet.GroupGrid({
id:"BorrowGrid2",
pageSize:10,
DataSourceParams:{tableName:"TestReturnBook_View",key:"ID",query:null,search:null,groupBy:"BorrowDate",orderBy:"BorrowDate",ascDesc:"DESC"},
cm:cm2,
height:250,
tbar:[
new Ext.Toolbar.Fill(),"","-"
,{
text:"添加",
tooltip:"添加新信息",
iconCls:"addicon"
},"","-",{
text:"编辑",
tooltip:"编辑信息",
iconCls:"editicon"
}],listeners:{
'contextmenu':function(e)
{
e.stopEvent();
}
}
});
window.onload=function(){
Ext.QuickTips.init();
BorrowGrid1.render(document.getElementById("div1"));
BorrowGrid2.render(document.getElementById("div2"));
};
</script>
<body scroll=no>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>