본문 바로가기

웹 개발/extjs4

extjs grid 헤더 통합 및 하단 합계 추가.


그리드 사용중 헤더 통합, 하단에 합계를 노출해야할 업무가 있다.

features에 ftype을 summary로 해서 통계 기능을 이용하면 된다.

기본적으로 sum, max, min, average, count를 제공한다.


//commify는 0,000 포맷으로 변환해주는 펑션
function summaryRenderer(value, summaryData, dataIndex) {
	if(Number(value) > 0) value = commify(Number(value));
	return value+ ' 명';
}

grid = Ext.create('Ext.grid.Panel', {
	store : store,
	stateful : false,
	collapsible : false,
	multiSelect : false,
	stateId : 'stateGrid',
	disableSelection : true,
	loadMask : true,
	features: [{
		ftype: 'summary'
	}],
	columns : Ext.create('Ext.grid.header.Container', {
		items : [
			{ 
				text : '단위지역',	width : 140,	align :  'center',	sortable : false,	dataIndex : 'UNIT_AREA',
				summaryType: 'sum',
				summaryRenderer: function(value, summaryData, dataIndex) {
					return '합계';
				}
			},
			{ 
				text : '인구수',		width : 130,	align : 'center',	sortable : false,	dataIndex : 'TPPCN',
				// 컬럼 값
					renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
					return value;
					},
					xtype: 'numbercolumn', format:'0,000',
					summaryType: 'sum',
					summaryRenderer: summaryRenderer
				},
				{ text : '성별',
					columns: [
							{ 
								text     : '남성',	width    : 90, 	align : 'center',	sortable : false, 	dataIndex: 'MPPCN',
								xtype: 'numbercolumn', format:'0,000',
								summaryType: 'sum',
								summaryRenderer: summaryRenderer
							}, 
							{ 
								text     : '여성', 	width    : 90, 	align : 'center',	sortable : false, 	dataIndex: 'FPPCN',
								xtype: 'numbercolumn', format:'0,000',
								summaryType: 'sum',
								summaryRenderer: summaryRenderer
							}, 
						]
					}
				], 
		sortable : false
	}),
	listeners: {
		itemdblclick: {
			fn: function(grid, selRow, selHtml){
				// your codes...
			}
		}
	}
	autoHeight: true,
	width : 1025,
	renderTo : 'grid',
	viewConfig : {
		stripeRows : true,
		enableTextSelection : false
	}
});







'웹 개발 > extjs4' 카테고리의 다른 글

Ext.create() and Ext.widget() 의 차이점...  (0) 2013.07.26
Ext.Ajax  (0) 2013.07.22
extjs grid dataStore onLoad 처리.  (0) 2012.04.24
extjs grid double click event  (0) 2012.04.23
extjs grid 헤더와 컬럼 따로 정렬하기  (0) 2012.04.23