그리드 사용중 헤더 통합, 하단에 합계를 노출해야할 업무가 있다.
features에 ftype을 summary로 해서 통계 기능을 이용하면 된다.
기본적으로 sum, max, min, average, count를 제공한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | //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 |