extjs双层表头

 

extjs双层表头

分类： Extjs+.NET+sqlserver2005 2011-08-11 15:22  2362人阅读  评论(6)  收藏  举报

extjs header stylesheet plugins border ext

 

 首先要在页面中引用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标签中（具体引用路径根据文件所在路径来定）。

[javascript]  view plain copy

1. var row = [  
2.     { header: '', colspan: 1, align: 'center' },//header表示父表头标题，colspan表示包含子列数目  
3.     { header: '项目名称', colspan: 1, align: 'center' },  
4.    { header: '套数', colspan: 6, align: 'center' },  
5.    { header: '总销售面积', colspan: 4, align: 'center' },  
6.      
7.    ];  
8.    var group = new Ext.ux.grid.ColumnHeaderGroup({  
9.        rows: [row]  
10.    });  
11.   
12.    //--------------------------------------------------列头  
13.    var cm = new Ext.grid.ColumnModel([  
14.      new Ext.grid.RowNumberer(), //自动添加行号  
15.   
16.         {  
17. /         header: "项目名称",  
18.         dataIndex: "project_name",  
19.         //可以进行排序   
20.         sortable: true  
21.   
22.     },{  
23.         header: "总数",  
24.         dataIndex: "zongshu",  
25.         //可以进行排序  
26.         sortable: true  
27.   
28.     },  {  
29.         header: "已售",  
30.         dataIndex: "yishou",  
31.         //可以进行排序  
32.         sortable: true  
33.   
34.     }, {  
35.         header: "未售",  
36.         dataIndex: "weishou",  
37.         //可以进行排序  
38.         sortable: true,  
39.   
40.     },  {  
41.         header: "大定",  
42.         dataIndex: "dading",  
43.         //可以进行排序  
44.         sortable: true  
45.   
46.     },  {  
47.          header: "小定",  
48.         dataIndex: "xiaoding",  
49.         //可以进行排序  
50.         sortable: true  
51.   
52.     },{  
53.         header: "保留",  
54.         dataIndex: "baoliu",  
55.         //可以进行排序  
56.         sortable: true,  
57.     },  {  
58.         header: "总面积(M²)",  
59.         dataIndex: "zongmianji",  
60.         //可以进行排序  
61.         sortable: true  
62.   
63.     }, {  
64.          header: "已售面积(M²)",  
65.         dataIndex: "yishoumianji",  
66.         //可以进行排序  
67.         sortable: true  
68.   
69.     },{  
70.          header: "未售面积(M²)",  
71.         dataIndex: "weishoumianji",  
72.         //可以进行排序  
73.         sortable: true,  
74.     }))  
75.   
76.     },   
77.   
78.   
79.      {  
80.         header: "销售(面积)比例",  
81.         dataIndex: "bili",  
82.         //可以进行排序  
83.         sortable: true  
84.   
85.     }  
86.   
87.   
88.        ]);  

[javascript]  view plain copy

1. //----------------------------------------------------定义grid  
2.    var grid = new Ext.grid.EditorGridPanel({  
3.        id: "SalesAnaliseGrid",  
4.        store: SalesAnastore,  
5.        cm: cm,  
6.        loadMask: true,  
7.        //超过长度带自动滚动条  
8.        autoScroll: true,  
9.        border: false,  
10.        items: [tb1],  
11.        viewConfig: {  
12.            columnsText: "显示/隐藏列",  
13.            sortAscText: "正序排列",  
14.            sortDescText: "倒序排列",  
15.            forceFit: true  
16.        },  
17.   
18.   
19.        //分页  
20.        bbar: new Ext.PagingToolbar({  
21.            store: SalesAnastore,  
22.            pageSize: pageSize,  
23.            //显示右下角信息  
24.            displayInfo: true,  
25.            displayMsg: '当前记录 {0} -- {1} 条 共 {2} 条记录',  
26.            emptyMsg: "没有记录",  
27.            prevText: "上一页",  
28.            nextText: "下一页",  
29.            refreshText: "刷新",  
30.            items:["图例：",  
31.            {xtype: "label", id: "a", text:'',style: {backgroundColor: '#CCCCCC'}},  
32.            {xtype: "label", id: "b", text:'',style: {backgroundColor: '#990033'}},  
33.            {xtype: "label", id: "c", text:'',style: {backgroundColor: '#FF9900'}},  
34.            {xtype: "label", id: "d", text:'',style: {backgroundColor: '#009900'}},  
35.            {xtype: "label", id: "e", text:'',style: {backgroundColor: '#6633FF'}}  
36.            ],   
37.            lastText: "最后页",  
38.            firstText: "第一页",  
39.            beforePageText: "当前页",  
40.            afterPageText: "共{0}页",  
41.   
42.        }),  
43.   
44.   
45.               plugins: group // 要加上这一句  
46.   
47.    });