sample - Groupping Grid

<#ftl encoding="utf-8">
<#--
File Name : indexGrouppingGrid.ftl
Sub-System  Name : GRID 목록조회
Description : GRID 목록조회
최종작성일 : 2012.10.11
최종작성자: 윤혁신
-->
<script language="javascript" type="text/javascript">

var mainJsonStore; // 목록조회 Json Store
var mainGrid; // 목록조회 Grid

Ext.onReady(function(){

   Ext.define('Restaurant', {
       extend: 'Ext.data.Model',
       fields: ['name', 'cuisine']
   });

  var restaurants = Ext.create('Ext.data.Store', {
    storeId: 'restaraunts',
      model: 'Restaurant',
      sorters: ['cuisine','name'],
      groupField: 'cuisine',
      data: [
<#if listGridSample?has_content>
<#list listGridSample as item>
        {name:'${item.name?default('')}', cuisine:'${item.cuisine?default('')}'},
</#list>
</#if>
      ],
       listeners: {
           groupchange: function(store, groupers) {
               var grouped = restaurants.isGrouped(),
                   groupBy = groupers.items[0] ? groupers.items[0].property : '',
                   toggleMenuItems, len, i = 0;

               // Clear grouping button only valid if the store is grouped
               grid.down('[text=Clear Grouping]').setDisabled(!grouped);
             
               // Sync state of group toggle checkboxes
               if (grouped && groupBy === 'cuisine') {
                   toggleMenuItems = grid.down('button[text=Toggle groups...]').menu.items.items;
                   for (len = toggleMenuItems.length; i < len; i++) {
                       toggleMenuItems[i].setChecked(groupingFeature.isExpanded(toggleMenuItems[i].text));
                   }
                   grid.down('[text=Toggle groups...]').enable();
               } else {
                   grid.down('[text=Toggle groups...]').disable();
               }
           }
       }
  });

    var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
            groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
            hideGroupedHeader: true,
            startCollapsed: true,
            id: 'restaurantGrouping'
        }),
        groups = restaurants.getGroups(),
        len = groups.length, i = 0,
        toggleMenu = [],
        toggleGroup = function(item) {
            var groupName = item.text;
            if (item.checked) {
                groupingFeature.expand(groupName, true);
            } else {
                groupingFeature.collapse(groupName, true);
            }
        };

   // 3. 리스트 그리드
mainGrid = Ext.create('Ext.grid.Panel', {
      id : 'main_grid',
      collapsible: true,
      resizable: true,
       width: 600,
       height: 300,
       store: restaurants,
      features: [groupingFeature],
       columns:[
{
header : '고객명',
flex: 1,
dataIndex : 'name'
}, {
header : "월급",  
flex: 1,
dataIndex : 'cuisine'
}
       ],
       renderTo: 'div_mainlist_grid' // 그리드에 매핑하는 DOM 객체 (DIV 태그)
   });

//window.onload =fncIframeResize(); //왼쪽메뉴 있을 경우 iframe resize
 
}) // Ext.onready End

</script>

<!-- 설명-->
<div>
- Grid에서 Groupping 된 리스트를 표현한다.<br>
- 'Ext.data.Store'에서 groupField를 지정해야 한다.<br>
<br>
</div>
<!-- //설명 -->

    <!-- 리스트 테이블 시작 -->
    <div class="grid_box mt5">
<div id="div_mainlist_grid"></div> <!-- 그리드가 매핑되는 영역 -->  
</div>