Ext多表头

在ext3.2.1中的多表头设置

首先要将其中要用到的脚本与样式添加进来

ColumnHeaderGroup.js
ColumnHeaderGroup.css
GroupHeaderPlugin.js
GroupHeaderPlugin.css

然后在EXT中要进行多表头设置的grid中的CM进行如下更改：

            var directionChangeCm = new Ext.grid.ColumnModel
            ({
               columns:[

                    ]  ,

              rows:[
                    [
                         {},{},{header:'合并8列',colspan:8, align:'center'},
                         {header:'合并8列',colspan:8, align:'center'},
                         {header:'合并7列',colspan:7, align:'center'},
                         {header:'合并两列',colspan:2, align:'center'},
                         {}
                    ]
                ]
            });

其中rows是设置合并的列，如果还要增加一个表头，可以再在rows中一条记录，

接着就是在grid属性中增加以下 的一些设置：

    var directionChangeGrid = new Ext.grid.EditorGridPanel
            ({
                cm: directionChangeCm,
                doubleHead:true,//设置为true
                rowSpan:true,//设置为true
                sm: new Ext.grid.RowSelectionModel(),
                autoScroll: true,
                store: directionChangeStore,
                clicksToEdit:1,//单击编辑
                
                ,plugins:[new Ext.ux.plugins.GroupHeaderGrid()]
            });

EXT4.1.0以上的版本就比较简单（以下是ext自身的例子）：

    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columnLines: true,
        columns: [{
            text     : 'Company',
            flex     : 1,
            sortable : false,
            dataIndex: 'company'
        }, {
            text: 'Stock Price',
            columns: [{
                text     : 'Price',
                width    : 75,
                sortable : true,
                renderer : 'usMoney',
                dataIndex: 'price'
            }, {
                text     : 'Change',
                width    : 75,
                sortable : true,
                renderer : change,
                dataIndex: 'change'
            }, {
                text     : '% Change',
                width    : 75,
                sortable : true,
                renderer : pctChange,
                dataIndex: 'pctChange'
            }]
        },

           {
            text     : 'Last Updated',
            width    : 85,
            sortable : true,
            renderer : Ext.util.Format.dateRenderer('m/d/Y'),
            dataIndex: 'lastChange'
        }],
        height: 350,
        width: 600,
        title: 'Grouped Header Grid',
        renderTo: 'grid-example',
        viewConfig: {
            stripeRows: true
        }
    });

即是在columns中增加columns