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