首先要在页面中引用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 // 要加上这一句
});