欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ext4 表格分组和组标题的设置

程序员文章站 2022-06-12 22:21:01
...

 

 

 

	        Ext.create('Ext.data.Store', {
	            storeId:'trainDataStore',
	            fields:['type', 'no', 'checkitem', 'result'],
	            groupField: 'type',
	            sorters:['no'],
	            data:{'items':[
	                { 'type': '1)飞行前',  "no":"1",  "checkitem":"设备考试(口试或笔试)",  "result":""  },
	                { 'type': '1)飞行前',  "no":"2",  "checkitem":"飞行前检查",  "result":"通过" },
	                { 'type': '1)飞行前',  "no":"3",  "checkitem":"启动发动机,动力系统检查",  "result":"通过"  },
	                { 'type': '1)飞行前',  "no":"4",  "checkitem":"滑行、进出停机位程序",  "result":"通过"  },
	                
	                { 'type': '2)起飞',  "no":"5",  "checkitem":"正常起飞(仪表条件)",  "result":"通过"  },
	                { 'type': '2)起飞',  "no":"6",  "checkitem":"侧风起飞",  "result":"通过" },
	                { 'type': '2)起飞',  "no":"7",  "checkitem":"V1后发动机失效时的起飞",  "result":"通过"  }
	            ]},
	            proxy: {
	                type: 'memory',
	                reader: {
	                    type: 'json',
	                    root: 'items'
	                }
	            }
	        });
	        var trainListGrid = Ext.create('Ext.grid.Panel', {
	            region:'center',
	            forceFit: true,
	            split: true,
	            selType: 'cellmodel',
	            store: Ext.data.StoreManager.lookup('trainDataStore'),
	            features: [{ftype:'grouping',groupHeaderTpl: '{name}'}],
	            labelAlign:'top',
	            columns: [
	                {
	                	text: "序号",
	                	width:50,
	                	dataIndex: 'no'
	                },
	                {
	                	text: "检查项目",
	                	width:300,
	                	dataIndex: 'checkitem'
	                },
	                {
	                	text: "检查结果", 
	                	width:80,
	                	dataIndex: 'result'
	                }
	            ]
	        });