ext动态表头，及表头的分组

  

一，自定义的表头，默认表头使用

var groupTmp = [{header: '', colspan: 4, align: 'center' },{
        header : '加班日期及加班时长（单位：小时）',
        menuDisabled:true,
        colspan :30,
        align : 'center'
    },{header:'',colspan:3,align:'center'}];
    var group =   new Ext.ux.plugins.GroupHeaderGrid({
        //rows : [group1,group2]
        rows : [groupTmp]
    });
二，自定义列

  //列数组

  var colMArray1 = new Array();
    var colMArray2=new Array();
    colMArray2 = [{
        header : '地区', // 列标题
        dataIndex : 'wm_name',
        width:100,
         align : 'center'
       
    },{
        header : '姓名', // 列标题
        dataIndex : 'gsw_first_name',
        mcol:2,
        width:100,
         align : 'center'
    },{
        header : '员工编号', // 列标题
        dataIndex : 'gsw_employee_id',
        width:100,
         align : 'center'
    }];

    var colMArray5 = new Array();
     colMArray5 = [ {
        header : '离司日期', // 列标题
        dataIndex : 'wm_leave_date' 
    }];
    var colMArray6 = new Array();
     colMArray6 = [   {
        header : '1', // 列标题
        dataIndex : '1'
    }, {
        header : '2', // 列标题
        dataIndex : '2'
    },{
        header : '3', // 列标题
        dataIndex : '3'
    },{
        header : '4', // 列标题
        dataIndex : '4'
    },{
        header : '5', // 列标题
        dataIndex : '5'
    },{
        header : '6', // 列标题
        dataIndex : '6'
    },{
        header : '7', // 列标题
        dataIndex : '7'
    },{
        header : '8', // 列标题
        dataIndex : '8'
    },{
        header : '9', // 列标题
        dataIndex : '9'
    },{
        header : '10', // 列标题
        dataIndex : '10'
    },{
        header : '11', // 列标题
        dataIndex : '11'
    },{
        header : '12', // 列标题
        dataIndex : '12'
    },{
        header : '13', // 列标题
        dataIndex : '13'
    },{
        header : '14', // 列标题
        dataIndex : '14'
    },{
        header : '15', // 列标题
        dataIndex : '15'
    },{
        header : '16', // 列标题
        dataIndex : '16'
    },{
        header : '17', // 列标题
        dataIndex : '17'
    },{
        header : '18', // 列标题
        dataIndex : '18'
    },{
        header : '19', // 列标题
        dataIndex : '19'
    },{
        header : '20', // 列标题
        dataIndex : '20'
    },{
        header : '21', // 列标题
        dataIndex : '21'
    },{
        header : '22', // 列标题
        dataIndex : '22'
    },{
        header : '23', // 列标题
        dataIndex : '23'
    },{
        header : '24', // 列标题
        dataIndex : '24'
    },{
        header : '25', // 列标题
        dataIndex : '25'
    },{
        header : '26', // 列标题
        dataIndex : '26'
    },{
        header : '27', // 列标题
        dataIndex : '27'
    },{
        header : '28', // 列标题
        dataIndex : '28'
    },{
        header : '29', // 列标题
        dataIndex : '29'
    },{
        header : '30', // 列标题
        dataIndex : '30'
    }];
     var colMArray7 = new Array();
     colMArray7 = [{
         header : '日常', // 列标题
         dataIndex : 'jiabanType0'
     }, {
         header : '双休 ', // 列标题
         dataIndex : 'jiabanType1'
     }, {
         header : '节假 ', // 列标题
         dataIndex : 'jiabanType2'
     }];
  

    colMArray1 = colMArray1.concat(colMArray2);
    colMArray1 = colMArray1.concat(colMArray5);
    colMArray1 = colMArray1.concat(colMArray6);
    colMArray1 = colMArray1.concat(colMArray7);

    // 定义列模型
    var cm = new Ext.grid.ColumnModel({
                defaults : {
                    sortable : true,
                    menuDisabled:true,
                    align : 'center'
                },
                 columns:colMArray1,
                 rows:[groupTmp]
    });
   三，表格实例，

// 表格实例
    var grid = new Ext.grid.GridPanel({
        region : 'center', // 和VIEWPORT布局模型对应，充当center区域布局
        margins : '3 3 3 3',
        // collapsible : true,
        border : false,
        // 表格面板标题,默认为粗体，我不喜欢粗体，这里设置样式将其格式为正常字体
        title : '<span class="commoncss"></span>',
        // height : 500,
        autoScroll : true,
        frame : true,
        store : store, // 数据存储
        stripeRows : true, // 斑马线
        cm : cm, // 列模型
        bbar : bbar,// 分页工具栏
        // plugins : [ summary ], // 合计
        plugins :  [new Ext.ux.plugins.GroupHeaderGrid()] , // 分组
        //bodyStyle : "width:100%",
        viewConfig : {
            //scrollOffset : 0,// 表示表格右侧为滚动条预留的宽度
            // 不产横向生滚动条, 各列自动扩展自动压缩, 适用于列数比较少的情况
            //forceFit : true
        },
        loadMask : {
            msg : '正在加载表格数据,请稍等...'
        }
    });

 五，当事件触发，如点击按钮时，需重新变表头

  function setFomatForm(){
        var params = qForm.getForm().getValues();
        var tValue =params['starttime'];
        var arr=tValue.split("-");
        var countDay=dayNumOfMonth(arr[0],arr[1]);
        var colMArray11=new Array();
        for(var i=1;i<=countDay;i++){
            colMArray11.push({header : i, dataIndex:i, align : 'center'});
        }
        var cols=new Array();
        cols=cols.concat(colMArray2);
        cols=cols.concat(colMArray5);
        cols=cols.concat(colMArray11);
        cols=cols.concat(colMArray7);
        var rows_h=[{header: '', colspan: 4, align: 'center' },{
            header : '加班日期及加班时长（单位：小时）',
            menuDisabled:true,
            colspan :colMArray11.length,
            align : 'center'
        },{header:'',colspan:3,align:'center'}];
        grid.reconfigure(store,new Ext.grid.ColumnModel({
            columns:cols,
            rows:[rows_h]
        }));
    }

  完成