【分享】ExtJS grid可分组显示、expand插件、中文排序/行、单元格背景/字体颜色/静态分页

hoojo 2010-08-19 03:36:23

加精

上个周末在家写了2个关于grid的小案例，拿来给大家分享下；由于公司需要用到中文排序，其他的功能是自己加到案例中的
只是做个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>