콤보박스

<#include "/base/include/header.ftl" encoding="UTF-8" parse=true>

<script type="text/javascript">

var ctprvn_combo_store; // 지역 store
var sigungu_combo_store; // 시군구 store
var dong_combo_store; // 읍면동 store

var ctprvn_grid_combo_store; // 지역 store
var sigungu_grid_combo_store; // 시군구 store
var dong_grid_combo_store; // 읍면동 store

var zip_rowidx = 0;

var zipJsonStore;
var zipGrid;

Ext.onReady(function() {
// 지역 combobox (서울, 경기, 강원 등)
Ext.create('Ext.form.field.ComboBox', {
id : 'sel_ctprvn',
   typeAhead: true,
   transform: 'sel_ctprvn',
   width: 100,
   editable : false,
   forceSelection: true,
       listeners:{
           'select': function (combo,  record,  index) {
           
            if(combo.value == '') {
            Ext.getCmp('sel_signgu').setValue('');            
            Ext.getCmp('sel_dong').setValue('');
            sigungu_combo_store.removeAll();
            dong_combo_store.removeAll();
            sigungu_combo_store.load({ params : { ctprvn : combo.value }});
            } else {
            Ext.getCmp('sel_dong').setValue('');
            dong_combo_store.removeAll();
            sigungu_combo_store.load({ params : { ctprvn : combo.value }});
            }
           
           }
        }  
});

// 1. 데이터 모델 정의 JSON 데이터
Ext.define('combo_sigungu', {
   extend: 'Ext.data.Model',
   fields: [
    {name: 'signgu', mapping: 'signgu'}
   ]
});

   // 2. Store 정의
   sigungu_combo_store = Ext.create('Ext.data.Store', {
       model: 'combo_sigungu', // 선언한 모델 정의..
       proxy: {
           type: 'ajax',
           url: '<@spring.url "/sample/zip/listSigngu.do" />',
           headers: { 'Accept': 'application/json' },
           reader: {            
               root: 'sigungulist' // JSON 데이터의 ROOT
           },
           autoLoad : false    
       }
   });

// 시군구 combobox
   var signgu = Ext.create('Ext.form.field.ComboBox', {
       id : 'sel_signgu',
       typeAhead: true,
       displayField: 'signgu',
       valueField: 'signgu',
   editable : false,
   forceSelection: true,      
       width: 230,
       store: sigungu_combo_store,
       renderTo : 'div_signgu',
       listeners:{
           'select': function (combo,  record,  index) {
            Ext.getCmp('sel_dong').setValue('');
            dong_combo_store.load({ params : { signgu : combo.value }});
           }
        },
       queryMode: 'local'
   });


// 1. 데이터 모델 정의 JSON 데이터
Ext.define('combo_dong', {
   extend: 'Ext.data.Model',
   fields: [
    {name: 'dong', mapping: 'dong'}
   ]
});

   // 2. Store 정의
   dong_combo_store = Ext.create('Ext.data.Store', {
       model: 'combo_dong', // 선언한 모델 정의..
       proxy: {
           type: 'ajax',
           url: '<@spring.url "/sample/zip/listDong.do" />',
           headers: { 'Accept': 'application/json' },
           reader: {            
               root: 'donglist' // JSON 데이터의 ROOT
           },
           autoLoad : false    
       }
   });

// 읍면동 combobox
var dong = Ext.create('Ext.form.field.ComboBox', {
       id : 'sel_dong',
       typeAhead: true,
   editable : false,
   forceSelection: true,
   lazyRender: true,
       width: 250,
       renderTo : 'div_dong',
       store: dong_combo_store,      
       queryMode: 'local',
       displayField: 'dong',
       valueField: 'dong'          

});

// 행추가
Ext.create('Ext.Button', {
id: 'btn_add',
renderTo: 'div_add',
text: '&nbsp;추가',
tooltip: '추가',
iconCls: 'icon_add',
handler: function(){

                var r = Ext.create('zipgrid', {
                 
                });
                zipJsonStore.insert(0, r);
                cellEditing.startEditByPosition({row: 0, column: 0});
}
});

// 초기화
Ext.create('Ext.Button', {
id: 'btn_clear',
renderTo: 'div_clear',
text: '&nbsp;초기화',
tooltip: '초기화',

handler: function(){
zipJsonStore.removeAll();
}
});

    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    });
   

// 1. 데이터 모델 정의 JSON 데이터
Ext.define('combo_grid_ctprvn', {
   extend: 'Ext.data.Model',
   fields: [
    {name: 'ctprvn', mapping: 'ctprvn'}
   ]
});

   // 2. Store 정의
   ctprvn_grid_combo_store = Ext.create('Ext.data.Store', {
       model: 'combo_grid_ctprvn', // 선언한 모델 정의..
       proxy: {
           type: 'ajax',
           url: '<@spring.url "/sample/zip/listCtprvn.do" />',
           headers: { 'Accept': 'application/json' },
           reader: {            
               root: 'ctprvnlist' // JSON 데이터의 ROOT
           },
           autoLoad : false    
       }
   });


// 1. 데이터 모델 정의 JSON 데이터
Ext.define('combo_grid_sigungu', {
   extend: 'Ext.data.Model',
   fields: [
    {name: 'signgu', mapping: 'signgu'}
   ]
});

   // 2. Store 정의
   sigungu_grid_combo_store = Ext.create('Ext.data.Store', {
       model: 'combo_grid_sigungu', // 선언한 모델 정의..
       proxy: {
           type: 'ajax',
           url: '<@spring.url "/sample/zip/listSigngu.do" />',
           headers: { 'Accept': 'application/json' },
           reader: {            
               root: 'sigungulist' // JSON 데이터의 ROOT
           },
           autoLoad : false    
       }
   });


// 1. 데이터 모델 정의 JSON 데이터
Ext.define('combo_grid_dong', {
   extend: 'Ext.data.Model',
   fields: [
    {name: 'dong', mapping: 'dong'}
   ]
});

   // 2. Store 정의
   dong_grid_combo_store = Ext.create('Ext.data.Store', {
       model: 'combo_grid_dong', // 선언한 모델 정의..
       proxy: {
           type: 'ajax',
           url: '<@spring.url "/sample/zip/listDong.do" />',
           headers: { 'Accept': 'application/json' },
           reader: {            
               root: 'donglist' // JSON 데이터의 ROOT
           },
           autoLoad : false    
       }
   });

   
    // 1. 데이터 모델 정의 JSON 데이터
  Ext.define('zipgrid', {
        extend: 'Ext.data.Model',
        fields: [
        {name: 'ctprvn1', mapping: 'ctprvn1'},
        {name: 'signgu1', mapping: 'signgu1'},
        {name: 'dong1', mapping: 'dong1'}
        ]
    });

    // 2. Store 정의
    zipJsonStore = Ext.create('Ext.data.Store', {
        model: 'zipgrid', // 선언한 모델 정의..
        remoteSort: false,
        proxy: {
            type: 'ajax',
            url: 'none',
            headers: { 'Accept': 'application/json' }
        }
    });


// 3. 주소 그리드
zipGrid = Ext.create('Ext.grid.Panel', {
      title: 'Grid Combobox 예제',
      id : 'zip_grid',
        width: '100%',
        height: 520,
        store: zipJsonStore,
columnLines: true,
disableSelection: false,
        loadMask: true,
        viewConfig: {
            trackOver: true,
            stripeRows: true,
            forceFit: true
           
        },
        // grid columns
        columns:[
{
           header: '지역',
           dataIndex: 'ctprvn1',
           width: 100,
           align: 'center',
           editor: {
               xtype: 'combobox',
               typeAhead: true,
               triggerAction: 'all',
               selectOnTab: true,
               store: ctprvn_grid_combo_store,
listeners: {
   select: function(combo, record, index) {
            dong_grid_combo_store.removeAll();
            sigungu_grid_combo_store.load({
            params : { ctprvn : combo.value },
            callback : function() {
            zipJsonStore.getAt(zip_rowidx).set('signgu1','');
            zipJsonStore.getAt(zip_rowidx).set('dong1','');
            }
            });
      cellEditing.completeEdit();
   }
},
       displayField: 'ctprvn',
       valueField: 'ctprvn',
               lazyRender: true,
               editable: false
           }
}, {

           header: '시군구',
           dataIndex: 'signgu1',
           width : 220,
           align: 'center',
           editor: {
               xtype: 'combobox',
               typeAhead: true,
               selectOnTab: true,
               store: sigungu_grid_combo_store,
listeners: {
   select: function(combo, record, index) {
            dong_grid_combo_store.load({
            params : { signgu : combo.value },
            callback : function() {
            zipJsonStore.getAt(zip_rowidx).set('dong1','');
            }
            });          
      cellEditing.completeEdit();
   }
},
valueField: 'signgu',
                    displayField: 'signgu',
                    queryMode: 'local',
               lazyRender: true,
               editable: false
           }  
}, {
           header: '읍면동',
           dataIndex: 'dong1',
           flex: 1,
           align: 'center',
           editor: {
               xtype: 'combobox',
               typeAhead: true,
               triggerAction: 'all',
               selectOnTab: true,
               store: dong_grid_combo_store,
listeners: {
   select: function(combo, record, index) {
      cellEditing.completeEdit();
   }
},
queryMode: 'local',
valueField: 'dong',
                    displayField: 'dong',
               lazyRender: true,
               editable: false
           }
}
        ],
        plugins: [cellEditing],
        renderTo: 'div_zip_grid' // 그리드에 매핑하는 DOM 객체 (DIV 태그)
    });
   
    // 주소 combobox 검색
    zipGrid.on('beforeedit',function(editor,e,opt) {
    zip_rowidx = e.rowIdx;
   
    var ctprvn1 = e.record.get('ctprvn1');
    if(e.field == 'signgu1') {
   
    sigungu_grid_combo_store.removeAll();
    sigungu_grid_combo_store.load({ params : { ctprvn : ctprvn1}})
    }

    var signgu1 = e.record.get('signgu1');
    if(e.field == 'dong1') {
    dong_grid_combo_store.removeAll();
    dong_grid_combo_store.load({ params : { signgu : signgu1} })
    }
       
    }); //

}); //Ext.onReady End.

</script>

<h1>ComboBox 예제</h1><br>
<div class="adminPage">
주소 선택(select box)
<table width="600">
<tr>
<td>
<select name="sel_ctprvn" id="sel_ctprvn">
<option value="">　</option>
<#if ctprvnList?has_content>
<#list ctprvnList as item>
<option value="${item.ctprvn?default('')}">${item.ctprvn?default('')}</option>
</#list>
</#if>
</select>
</td>
<td>
<div id="div_signgu"/>
</td>
<td>
<div id="div_dong"/>
</td>
</tr>
</table>
<br/><br/>
<table width="700">
<tr>
<td width="70" align="left"><div id="div_add"/></td>
<td width="630" align="left"><div id="div_clear"/></td>
</tr>
<tr>
<td colspan="2"><div id="div_zip_grid"/></td>
</tr>
</table>
</div>