在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