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
	}
});