EXT gridpanel 合并行

在实际工作中，我们需要实现如下图的效果，如下图：

 

 

那么，怎么实现呢？下面给大家做详细的讲解，首先，文件夹里的文件如下图所示，其实大家可以根据实际情况自定义文件名：

其中，page.js是放页面控件，data.js是放数据源，ColumnHeaderGroup.js很重要，是我从网上找的，最主要的就是这3个文件，其他几个文件不是很重要。

 GridDoubleHeader.js文件里面的全部代码如下，大家只要直接复制就行了：

MyGridView = Ext.extend(Ext.grid.GridView, {
            renderHeaders : function() {
                var cm = this.cm, ts = this.templates;
                var ct = ts.hcell, ct2 = ts.mhcell;
                var cb = [], sb = [], p = {}, mcb = [];
                for (var i = 0, len = cm.getColumnCount(); i < len; i++) {
                    p.id = cm.getColumnId(i);
                    p.value = cm.getColumnHeader(i) || "";
                    p.style = this.getColumnStyle(i, true);
                    if (cm.config[i].align == 'right') {
                        p.istyle = 'padding-right:16px';
                    }
                    cb[cb.length] = ct.apply(p);
                    if (cm.config[i].mtext)
                        mcb[mcb.length] = ct2.apply({
                                    value : cm.config[i].mtext,
                                    mcols : cm.config[i].mcol,
                                    mwidth : cm.config[i].mwidth
                                });
                }

                var s = ts.header.apply({
                            cells : cb.join(""),
                            tstyle : 'width:' + this.getTotalWidth() + ';',
                            mergecells : mcb.join("")
                        });
                return s;
            }
        });
viewConfig = {
    templates : {
        header : new Ext.Template(
                ' <table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
                ' <thead> <tr class="x-grid3-hd-row">{mergecells} </tr>'
                        + ' <tr class="x-grid3-hd-row">{cells} </tr> </thead>',
                " </table>"),
                mhcell : new Ext.Template(
                        ' <td class="x-grid3-header" colspan="{mcols}" style="width:{mwidth}px;"> <div align="center">{value}</div>',
                        " </td>")
            }
        };

 

 

接下来：

第一步，先画界面，在page.js里定义一个名为cn.howso.ext.page.netCM的组件，就是列头。

cn.howso.ext.page.netCM = new Ext.grid.ColumnModel([ 

{
   mtext : " ",// 给父表头取的名字
   mcol : 1,// 包含了几列
   mwidth :100,// 子表头宽度
   width : 100,// 被包含子表头的宽度,最好填写一下
   align: 'center',//内容居中
   header : "<div align='center'>分区</div>",
 },{
   mtext : "月份",// 给父表头取的名字
   mcol : 1,// 包含了几列
   mwidth :100,// 子表头宽度
   width : 100,// 被包含子表头的宽度,最好填写一下
   align: 'center',//内容居中
   header : "<div align='center'>当前月份</div>",
 }
,{
   mtext : "2G小区数",
   mcol : 3,
   mwidth : 300,
   width : 100,
   align: 'center',
   header : "<div align='center'>当前月份</div>",
 },{
   width : 100,
   align: 'center',
   header : "<div align='center'>上个月份</div>",
 },{
   width : 100,
   align: 'center',
   header : "<div align='center'>增长率</div>",
 }
,{
   mtext : "TD小区数",
   mcol : 3,
   mwidth : 300,
   width : 100,
   align: 'center',
   header : "<div align='center'>当前月份</div>",
 },{
   width : 100,
   align: 'center',
   header : "<div align='center'>上个月份</div>",
 },{
   width : 100,
   align: 'center',
   header : "<div align='center'>增长率</div>",
  } 
 }
}}
}
]);

可能上面的括号有些是多余的，大家可以自己调整一下。

 

 

第二步：然后还是在page.js里定义一个grid组件，这个grid组件中的cm属性为刚才定义好的cn.howso.ext.page.userCM，grid的view属性设为wiew : new MyGridView(viewConfig)，其中的MyGridView就是上面那个GridDoubleHeader.js里面定义好的。    

grid组件的代码如下：

cn.howso.ext.page.userGrid = new Ext.grid.GridPanel( {
 id : 'cn.howso.ext.page.userGrid',
 title : '用户基本信息',
 region : 'center',
 border : true,
 height : 300,
 loadMask : false,
 cm : cn.howso.ext.page.userCM,
 view : new MyGridView(viewConfig),
 viewConfig : {
  forceFit : true
 }
});

 

 

第三步：在main.js里建立一个Ext.Viewport，然后在viewport里使用上面定义的grid组件，就算是菜鸟也应该懂的。

 

 

第四步：在main.jsp导入2个很重要的文件：ColumnHeaderGroup.css和ColumnHeaderGroup.js，

它们都是ext自带的，大家可以自己去找，它们的路径请看下面main.jsp中所引用的这两个文件的路径。除此之外，别忘记了还要在main.jsp中引入GridDoubleHeader.js文件。

main.jsp里面的全部代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <jsp:include page="/public/public.jsp"></jsp:include>
    

 

 <!-- 引入ext自带的ColumnHeaderGroup.css和ColumnHeaderGroup.js -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/public/extjs/ux/css/ColumnHeaderGroup.css"/>
 <script type="text/javascript" src="${pageContext.request.contextPath}/public/extjs/ux/ColumnHeaderGroup.js"></script>
    

    <!-- 引入下面的文件 --> 
    <script type="text/javascript" src="GridDoubleHeader.js"></script>
    <script type="text/javascript" src="data.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript" src="page.js"></script> 
  </head>
  
  <body bgcolor="#000"> 
  </body>
</html>