GridPanel合并表头
注意:一定要引入插件的js文件
<script type="text/javascript" src="../js/ext/GroupHeaderPlugin.js"></script>
1.启动Extjs并布局:
Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../js/ext/resources/images/default/s.gif'; Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); Ext.QuickTips.init(); var viewPort = new Ext.Viewport({ layout:"fit", //布局方式为充满界面 items:[myTab] }); });
2.创建TabPanel:
var myTab = new Ext.TabPanel({ id:"myTab", activeTab:0, enableTabScroll:true, layoutOnTabChange:true, items:[{ layout:"fit", //布局 title:"合并表头示例", items:myGrid }] });
3.创建Store:
var myStore = new Ext.data.JsonStore({ data:[ {id:1,name:"张三",age:22,school:"第一中学",grade:"高一"}, {id:2,name:"李四",age:23,school:"第一中学",grade:"高二"}, {id:3,name:"王五",age:24,school:"第一中学",grade:"高三"} ], fields:["id","name","age","school","grade"] //注意:5个字段 });
4.创建ColumnModel:
var myColumn = new Ext.grid.ColumnModel({ defaultSortable:false, columns:[ { header:"编号", dataIndex:"id" },{ header:"姓名", dataIndex:"name" },{ header:"年龄", dataIndex:"age" },{ header:"学校", dataIndex:"school" },{ header:"年级", dataIndex:"grade" } ], rows:[ [ {},{},{},{header: '教育情况', colspan: 2, align: 'center'} ] ] //此处为合并表头的地方——注意前面有3个空的{} });
注意:
1.需要在columnModel中加入rows属性。
2.有几个没有合并在表头中就有几个空的{}。
3.有多少个被合并,colspan就为多少!
5.创建GridPanel:
var myGrid = new Ext.grid.GridPanel({ cm:myColumn, ds:myStore, layout:"fit", stripeRows:true, plugins: [new Ext.ux.plugins.GroupHeaderGrid()], //合并表头的插件 loadMask:{msg:'正在加载数据,请稍侯……'}, tbar:[ { text:"保存", iconCls:"save" },{ text:"增加行", iconCls:"add" },{ text:"删除行", iconCls:"remove" } ] });
注意:
1.需要在GridPanel中放入合并表头的插件!
图示: