EXTjs grid双层表头的实现

加载到页面中的js文件
GridDoubleHeader.js

/*******************************************************************************  
* @author   
* @since   
* @description 双层表头  
* @param{}  
*             mtext 表头名   
* @param{}  
*             mcol 向后跨越子表头个数  
* @param{}  
*              mwidth 上至下第一层表头的宽度,即父表头的宽度   
* @class MyGridView  
* @extends Ext.grid.GridView  
*/
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>")  
    }  
};

修改grid的cm配置

var ldrk_cm = new Ext.grid.ColumnModel(\[new Ext.grid.RowNumberer({  
                    mtext : " ",// 给父表头取的名字  
                    mcol : 1,// 包含了几列  
                    mwidth : 20,// 子表头宽度  
                    width : 20,// 被包含子表头的宽度,最好填写一下  
                    header : "No."
                }), {  
            mtext : "本地住址<br>或",  
            mcol : 1,  
            mwidth : 190,  
            width : 200,  
            header : "<div align='center'>管理单位</div>",  
            dataIndex : "address"
        }, {  
            mtext : " ",  
            mcol : 1,  
            mwidth : 80,  
            width : 80,  
            header : "<div align='center'>姓名</div>",  
            sortable : true,  
            dataIndex : "name"
        }, {  
            mtext : "<br>性",  
            mcol : 1,  
            mwidth : 30,  
            width : 30,  
            header : "<div align='center'>别</div>",  
            sortable : true,  
            dataIndex : "sex"
        }, {  
            mtext : " ",  
            mcol : 1,  
            mwidth : 80,  
            width : 80,  
            header : "<div align='center'>出生年月</div>",  
            dataIndex : "birthday"
        }, {  
            mtext : " ",  
            mcol : 1,  
            mwidth : 80,  
            width : 90,  
            header : "<div align='center'>结婚年月</div>",  
            dataIndex : "marryDate"
        }, {  
            mtext : " ",  
            mcol : 1,  
            mwidth : 100,  
            width : 110,  
            header : "<div align='center'>流动方向</div>",  
            dataIndex : "moveAspect"
        }, {  
            mtext : "流入人口填户籍地名<br>流出人口填流向地名",  
            mcol : 1,  
            mwidth : 200,  
            width : 200,  
            header : "<div align='center'>流入(出)地名</div>",  
            dataIndex : "placename"
        }, {  
            mtext : "流入<br>(出)",  
            mcol : 1,  
            mwidth : 80,  
            width : 80,  
            header : "<div align='center'>年月</div>",  
            dataIndex : "moveDate"
        }, {  
            mtext : "离开<br>或返回",  
            mcol : 1,  
            mwidth : 80,  
            width : 80,  
            header : "<div align='center'>年月</div>",  
            dataIndex : "comeDate"
        }, {  
            mtext : "流入(出)<br>初期子女",  
            mcol : 2,  
            mwidth : 100,  
            width : 50,  
            header : "<div align='center'>男</div>",  
            dataIndex : "man"
        }, {  
            width : 50,  
            header : "<div align='center'>女</div>",  
            dataIndex : "woman"
        }, {  
            mtext : "流入(出)<br>初期避孕情况",  
            mcol : 2,  
            mwidth : 160,  
            width : 80,  
            header : "<div align='center'>采取措施名称</div>",  
            dataIndex : "measureName"
        }, {  
            width : 80,  
            header : "<div align='center'>起始年月</div>",  
            dataIndex : "startDate"
        }, {  
            mtext : "流动人口<br>婚育证明发验情况</div>",  
            mcol : 4,  
            mwidth : 320,  
            width : 80,  
            header : "<div align='center'>发证年月</div>",  
            dataIndex : "certificateDate"
        }, {  
            width : 80,  
            header : "<div align='center'>查验年月</div>",  
            dataIndex : "checkDate"
        }, {  
            width : 80,  
            header : "<div align='center'>查验结果</div>",  
            dataIndex : "checkResult"
        }, {  
            width : 80,  
            header : "<div align='center'>证件编号</div>",  
            dataIndex : "certificateNo"
        }\]);

cm中设置完成后 还要在grid中调用之前提到的插件

其实很简单,只需要在grid中调用这句话话就可以了

view : new MyGridView(viewConfig)