Extjs4之行合计应用

最新推荐文章于 2021-04-02 10:35:16 发布

无奈的伤城

最新推荐文章于 2021-04-02 10:35:16 发布

阅读量1k

点赞数

分类专栏： EXTJS 文章标签： extjs4 extjs

本文链接：https://blog.csdn.net/lianghl8090/article/details/46738793

版权

EXTJS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="../include/includeext.jsp" %>
<%@ include file="../include/public.jsp" %>
<script type="text/javascript" src="${jsPath}/Ext/src/ux/IFrame.js"></script>
</head>
<style type="text/css">
.x-grid-row-summary .x-grid-cell-inner {
            font-weight      : bold;
            font-size        : 12px;
            color			 : red;
            /* background-color : #ffd800; */
}
</style>
<body>
   <script type="text/javascript">
   
    var weekSigninGrid,weekSigninStore,weekStore;
	Ext.onReady(function(){
		
		/******* 查询学期列表 start**********/
		var semesterArr = [];
		var result = $.parseJSON($.ajax({
			async : false,
			url : '${basePath}semester/semester!getSemesterNameList.json',
			dataType : 'json'
		}).responseText);
		
		if (result['frf_success']) {
			var SemesterList = result['SemesterList'];
			for (var i = 0, ilen = SemesterList.length; i < ilen; i++) {
				var semester = [];
				semester.push(SemesterList[i]['UUID']);
				semester.push(SemesterList[i]['NAME']);
				semesterArr.push(semester);
			}
		}
		
		//获取教学周list
		weekStore = Ext.create('Ext.data.Store',{
			id:'weekStore',
			fields:['NAME'],
			proxy:{
				type:'ajax',
				url : '${basePath}classschdule/classschdule!classSchduleTeachingWeek.json',
				reader:{
					type: 'json', //返回数据类型为json格式
	                rootProperty: 'TeachingWeekList' //数据
				}
			},
			autoLoad:false
		});
		
		/******* 查询老师列表 start**********/
		var teacherArr = [];
		$.ajax({
			url : '${basePath}teacher/teacher!getTeacherNameList.json',
			dataType : 'json',
			success:function(result){
				if (result['frf_success']) {
					var TeacherList = result['TeacherList'];
					for (var i = 0, ilen = TeacherList.length; i < ilen; i++) {
						var teacher = [];
						teacher.push(TeacherList[i]['UUID']);
						teacher.push(TeacherList[i]['NAME']);
						teacherArr.push(teacher);
					}
				}
			}
		});
		/******* 查询老师列表 end**********/	
		
		
	    weekSigninStore = Ext.create('Ext.data.Store',{
				id:'store',
				fields:["uuid","name","teacherid","stuCnt","cnt","signinTotal","signinCnt"],
				sorters: {property: 'signinTotal', direction: 'DESC'},
				proxy:{
					type:'ajax',
					url : '${basePath}report/report!reportWeekSigninList.json',
					reader:{
						type: 'json', //返回数据类型为json格式
		                rootProperty: 'resultMap' //数据
					}
				},
				autoLoad:false
			});
		
		weekSigninGrid = Ext.create('Ext.grid.Panel',{
			id:'weekSigninGrid',
			store:weekSigninStore,
			region : 'center',
			//border:true,
			columnLines: true,
			loadMask: true,
			height : '60%',	
			//selModel: { selType: 'checkboxmodel',mode : 'SIMPLE' },   //选择框
			features: [{
				id: 'summary',
                ftype: 'summary',        
                showSummaryRow:false  //默认 不显示
            }],
            /* viewConfig : {
            	getRowClass : function(record,rowIndex,rowParams,store){
            		if(rowIndex == '7'){
            			return	"row-2";
            		}
	            }
            }, */
			tbar:[{   
                         width: 200,   
                         fieldLabel: '学期',   
                         id:'semesterId',
                         store:semesterArr,
                         labelWidth: 30,   
                         xtype: 'combo',
                         listeners:{
                        	 'change':function(field, newValue, oldValue, options){
                        		 //alert(newValue);
                        		 Ext.getCmp('week').setValue();
                        		 Ext.getCmp('week').getStore().load({params:{'semesId':newValue}});
                        	 }
                         }
                     },
                     {   
                         width: 200,   
                         fieldLabel: '教学周',   
                         id:'week',
                         store:weekStore,
                         displayField:'NAME',
                         valueField:'NAME',
                         queryMode: 'local',
                         labelWidth: 50,   
                         xtype: 'combo'
                     },
		             {text:"搜索",iconCls:"search",handler:function(){
		            	 var params = {};
		            	 var semesterId = Ext.getCmp('semesterId').getValue();
		            	 if(semesterId != null){
		            		 params['semesterId'] = semesterId;
		            	 }else{
		            		 Ext.Msg.alert('提示','请选择学期');
		            		 return;
		            	 }
		            	 var week = Ext.getCmp('week').getRawValue();
		            	 if(week != ''){
		            		 params['week'] = week;
		            	 }else{
		            		 Ext.Msg.alert('提示','请选择教学周');
		            		 return;
		            	 }
		            	 //获取到 grid 的 view 对象 
	            	 	 var view = weekSigninGrid.getView();
		            	 //显示 统计 行数据  // 默认 不显示
	            	 	 view.getFeature('summary').toggleSummaryRow(true);
		            	 weekSigninGrid.getStore().getProxy().extraParams = params;
		            	 weekSigninGrid.getStore().load();
		            	 
		             }}],
			columns:[
					{xtype: 'rownumberer'},
			        {dataIndex : 'UUID', text:'主键',hidden:true},
					{dataIndex : 'NAME', text:'名称',width:120, summaryType: 'count',summaryRenderer: function(value, summaryData, dataIndex) {
						//summaryData.tdCls = 'row-0';
						//summaryData.summaryRowCls = 'row-0';
						return Ext.String.format('{0}个班级', value); 
			        }
					},
					{dataIndex : 'TEACHERID', text:'班主任',width:120,renderer:function(v,r,s){
						return v != '' ? code2Name(v,teacherArr) : '';
					}},
					{dataIndex : 'STUCNT', text:'班级人数',width:100, summaryType: 'sum'},
					{dataIndex : 'cnt', text:'课时数',width:100,summaryType: 'sum'},
					{dataIndex : 'signinTotal', text:'应考勤总记录数',width:150,summaryType: 'sum'},
					{dataIndex : 'signinCnt', text:'实到考勤总记录数',width:150,summaryType: 'sum'}
					],
			 bbar: [{
	                xtype: 'pagingtoolbar',
	                id:'pagingtoolbar',
	                store: weekSigninStore,
	                displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
	                emptyMsg: "没有数据",
	                beforePageText: "当前页",
	                afterPageText: "共{0}页",
	                displayInfo: true                 
	            }]
		});
		
		Ext.create('Ext.container.Viewport', {
			layout : 'border',
			id:'Viewport',
			//renderTo:Ext.getBody(),
			style : 'background-color: #f5f5f5;',
			items : [weekSigninGrid]
		});
		
	});
    </script>
</body>
</html>

summaryType（统计类型)共有五种 count\sum\min\max\average

如果亲希望改变这一行的样式：

 .x-grid-row-summary .x-grid-cell-inner {
            font-weight      : bold;
            font-size        : 14px;
            background-color : #ffd800;
}

简化了不少工作，但是有一点小遗憾，观察Ext.grid.feature.Summary这个类我们会发现，这个统计是在store下去找数据，当store带有分页，它统计的会是当前页的数据，如果你想统计的是所有记录数据，那只能通过其它方法了。

无奈的伤城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs4之行合计应用

.x-grid-row-summary .x-grid-cell-inner { font-weight : bold; font-size : 12px; color : red; /* background-color : #ffd800; */}
复制链接

扫一扫

专栏目录