只是做个demo方便以后参考;前段时间论坛有网友需要改变grid的单元格颜色,这里也加入了。还添加了部分插件
重写了写方法;
案例1:
/***
* grid基础综合案例
* 添加分页Ext.data.PagingMemoryProxy、重写Ext.data.Store支持中文汉字拼音字母首字母排序、
* Ext.data.GroupingStore分组(GroupingStore继承Store的)、
* 改变列背景色、行背景色、字体颜色getRowClass方法和renderer函数onRenderAgeCol的使用技巧
* 添加分组、行收缩展开插件Ext.grid.RowExpander使用及重写Ext.grid.RowExpander组件的
* 添加Ext.grid.GroupingView的groupTextTpl方法的使用
* author: hoojo
* create by: 2010-8-14
*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>可分组显示、expand插件、中文排序的Grid/改变行背景/单元格背景/字体颜色/分页</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="content-Type" content="text/html; charset=utf-8">
<meta http-equiv="author" content="hoojo">
<meta http-equiv="blog" content="http://blog.csdn.net/IBM_hoojo">
<link rel="stylesheet" type="text/css" href="ext2/resources/css/ext-all.css">
<style type="text/css">
.rowOdd {
background-color: #EFF7FF;
color: white;
}
.rowEven {
background-color: #CAE3FF;
color: white;
}
.cellBG {
background-color: #FFDD99;
font-weight: bold;
}
</style>
<script type="text/javascript" src="ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext2/ext-all.js"></script>
<script type="text/javascript" src="ext2/build/locale/ext-lang-zh_CN-min.js"></script>
<script type="text/javascript" src="jslib/PagingMemoryProxy.js"></script>
<!-- PagingMemoryProxy.js在ext-2.2\examples\locale可以找到 -->
<script type="text/javascript" src="jslib/RowExpander.js"></script>
<!-- RowExpander.jsext-2.2\examples\grid下可以找到-->
<script type="text/javascript" src="jslib/Ext.hoo.grid.ConformityGrid.js"></script>
</head>
<body>
</body>
</html>
/***
* grid基础综合案例
* 添加分页Ext.data.PagingMemoryProxy、重写Ext.data.Store支持中文汉字拼音字母首字母排序、
* Ext.data.GroupingStore分组(GroupingStore继承Store的)、
* 改变列背景色、行背景色、字体颜色getRowClass方法和renderer函数onRenderAgeCol的使用技巧
* 添加分组、行收缩展开插件Ext.grid.RowExpander使用及重写Ext.grid.RowExpander组件的
* 添加Ext.grid.GroupingView的groupTextTpl方法的使用
* author: hoojo
* create by: 2010-8-14
*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>可分组显示、expand插件、中文排序的Grid/改变行背景/单元格背景/字体颜色/分页</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="content-Type" content="text/html; charset=utf-8">
<meta http-equiv="author" content="hoojo">
<meta http-equiv="blog" content="http://blog.csdn.net/IBM_hoojo">
<link rel="stylesheet" type="text/css" href="ext2/resources/css/ext-all.css">
<style type="text/css">
.rowOdd {
background-color: #EFF7FF;
color: white;
}
.rowEven {
background-color: #CAE3FF;
color: white;
}
.cellBG {
background-color: #FFDD99;
font-weight: bold;
}
</style>
<script type="text/javascript" src="ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext2/ext-all.js"></script>
<script type="text/javascript" src="ext2/build/locale/ext-lang-zh_CN-min.js"></script>
<script type="text/javascript" src="jslib/PagingMemoryProxy.js"></script>
<!-- PagingMemoryProxy.js在ext-2.2\examples\locale可以找到 -->
<script type="text/javascript" src="jslib/RowExpander.js"></script>
<!-- RowExpander.jsext-2.2\examples\grid下可以找到-->
<script type="text/javascript" src="jslib/Ext.hoo.grid.ConformityGrid.js"></script>
</head>
<body>
</body>
</html>

look:按照国家分组的,其中还按照中文排序及Expand插件、分组修改单元格、行背景色、字体颜色