extjs双层表头 子曰

 

 首先要在页面中引用ColumnHeaderGroup.js和ColumnHeaderGroup.css这两个文件，否则会出现"Ext.ux.grid is undefined"错误。这两个文件放在EXT3.1发布包的examples/ux/目录下。

  <link rel="stylesheet" type="text/css" href="Ext/resources/css/ColumnHeaderGroup.css" />

 <script type="text/javascript" src="Ext/ColumnHeaderGroup.js"></script>

将上面的引用放在head标签中（具体引用路径根据文件所在路径来定）。

 var row = [
     { header: '', colspan: 1, align: 'center' },//header表示父表头标题，colspan表示包含子列数目
     { header: '项目名称', colspan: 1, align: 'center' },
    { header: '套数', colspan: 6, align: 'center' },
    { header: '总销售面积', colspan: 4, align: 'center' },
    
    ];
    var group = new Ext.ux.grid.ColumnHeaderGroup({
        rows: [row]
    });

    //--------------------------------------------------列头
    var cm = new Ext.grid.ColumnModel([
      new Ext.grid.RowNumberer(), //自动添加行号

         {
//         header: "项目名称",
         dataIndex: "project_name",
         //可以进行排序 
         sortable: true

     },{
         header: "总数",
         dataIndex: "zongshu",
         //可以进行排序
         sortable: true

     },  {
         header: "已售",
         dataIndex: "yishou",
         //可以进行排序
         sortable: true

     }, {
         header: "未售",
         dataIndex: "weishou",
         //可以进行排序
         sortable: true,

     },  {
         header: "大定",
         dataIndex: "dading",
         //可以进行排序
         sortable: true

     },  {
          header: "小定",
         dataIndex: "xiaoding",
         //可以进行排序
         sortable: true

     },{
         header: "保留",
         dataIndex: "baoliu",
         //可以进行排序
         sortable: true,
     },  {
         header: "总面积(M²)",
         dataIndex: "zongmianji",
         //可以进行排序
         sortable: true

     }, {
          header: "已售面积(M²)",
         dataIndex: "yishoumianji",
         //可以进行排序
         sortable: true

     },{
          header: "未售面积(M²)",
         dataIndex: "weishoumianji",
         //可以进行排序
         sortable: true,
     }))

     }, 


      {
         header: "销售(面积)比例",
         dataIndex: "bili",
         //可以进行排序
         sortable: true

     }


        ]);

 //----------------------------------------------------定义grid
    var grid = new Ext.grid.EditorGridPanel({
        id: "SalesAnaliseGrid",
        store: SalesAnastore,
        cm: cm,
        loadMask: true,
        //超过长度带自动滚动条
        autoScroll: true,
        border: false,
        items: [tb1],
        viewConfig: {
            columnsText: "显示/隐藏列",
            sortAscText: "正序排列",
            sortDescText: "倒序排列",
            forceFit: true
        },


        //分页
        bbar: new Ext.PagingToolbar({
            store: SalesAnastore,
            pageSize: pageSize,
            //显示右下角信息
            displayInfo: true,
            displayMsg: '当前记录 {0} -- {1} 条 共 {2} 条记录',
            emptyMsg: "没有记录",
            prevText: "上一页",
            nextText: "下一页",
            refreshText: "刷新",
            items:["图例：",
            {xtype: "label", id: "a", text:'',style: {backgroundColor: '#CCCCCC'}},
            {xtype: "label", id: "b", text:'',style: {backgroundColor: '#990033'}},
            {xtype: "label", id: "c", text:'',style: {backgroundColor: '#FF9900'}},
            {xtype: "label", id: "d", text:'',style: {backgroundColor: '#009900'}},
            {xtype: "label", id: "e", text:'',style: {backgroundColor: '#6633FF'}}
            ], 
            lastText: "最后页",
            firstText: "第一页",
            beforePageText: "当前页",
            afterPageText: "共{0}页",

        }),


               plugins: group // 要加上这一句

    });